总结

以上是小编为你收集整理的angular – 检测变量的变化？全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

Angular 检测 API 中的变化

您需要某种机制来通知设备服务器上的数据已更改。 HTTP 不能那样做（或者至少不擅长那样做）。一种成熟的解决方案是 WebSocket。

基本上你需要 WebSocket 客户端和服务器。在 Angular 中，您可以使用 rxjs/webSocket 作为 WebSocket 客户端。

我不知道我是否明白你想要做什么，但你必须使用 websockets 进行实时通信，或者你可以使用轮询。

interval(1000).pipe(
    switchMap(() => this.dataService.getRecipes()),distinctUntilChanged()
).subscribe(console.log);

Angular 组件怎么检测Input为引用类型的变化 ?

Angular 组件怎么检测Input为引用类型的变化 ?

Angular 组件 和 外界通信最基本的方式有2种，外界出入组件，使用Input 属性，组件传出数据，使用Output属性。Input 的属性的变化可以在ngOnChanges 钩子函数中检测到，但是如果Input属性的类型不是原始类型，如数组，数组的单个成员变化，如使用Array.splice/push 等方法改变了输入属性，改怎么监听呢？

监听 Array成员的改变

一般数组成员的改变是由一些常用的方法push splice pop, [index] = 操作引起 ，怎么监听这些操作导致数组的改变呢? 利用Angular 内置变检类IterableDiffers 来实现

实现步骤：

1. 构造函数中注入 IterableDiffers 实例

// 产品Differ
 private productsDiffer: IterableDiffer<any>;
constructor(private iterableDiffers:IterableDiffers) {}

2. 创建一个IterableDiffer实例

ngOnInit(): void {
    this.productsDiffer = this.iterableDiffers.find(this.products).create();
 }

3. 检测变化

ngDoCheck(): void {
    // IterableDiffer.diff
     const diff =  this.productsDiffer.diff(this.products);
     if(diff){
       console.log(''products is changed in ngDoCheck'');
     }
 }

trackByFn

如果想监听第三级，也就是数组对象的属性的变化，以上步骤还需要调整，create 方法转入trackByFn

// 新增
private trackByFn(index: number, item: any) {
    return item.name;
 }

//修改
ngOnInit(): void {
    this.productsDiffer = this.iterableDiffers.find(this.products)
                                                                                            .create(this.trackByFn);
  }

测试实例代码

app-shop

import { Component, OnInit } from ''@angular/core'';
import { products } from ''./data'';

@Component({
  selector: ''app-shop'',
  // templateUrl: ''./shop.component.html'',
  template: `
     <app-product-list [products]="products"></app-product-list>
     <p>
        <button (click)="test1()">[index]=</button>
        <button (click)="test2()">push</button>
        <button (click)="test()">reset</button>
        <button (click)="test3()">change object attribute</button>
      </p>
  `,
})
export class ShopComponent implements OnInit {
  public products  =  [];
  constructor() { }

  ngOnInit(): void {
    this.products = [...products];
  }
  // 使用数组索改变数组
  test1():void {
    this.products[1]= {
      name:''realme'',
      description:''a new brand phone'',
      price: 499
    }
  }
  // 使用push 方法
  test2():void {
    this.products.push({
      name:''xiaomi'',
      description:''you will love it'',
      price: 549
    });
  }
  // 重新赋值
  test(): void {
    this.products =[...products];
  }
  // 更深一级，改变对象的某一个属性
  test3(): void {
     this.products[0].name = ''iphone pro''
  }

}

app-product-list

import {
  Component,
  Input,
  IterableDiffer,
  IterableDiffers,
  OnInit,
  SimpleChanges
} from ''@angular/core'';

// import { products } from ''../data'';

@Component({
  selector: ''app-product-list'',
  // templateUrl: ''./product-list.component.html'',
  template:`
        <h2>Products</h2>
        <div *ngFor="let product of products;index as productId">
          <h3>
            <a [title]="product.name + '' details''"  >
              {{ product.name }}
            </a>
          </h3>
          <p *ngIf="product.description">
            Description: {{ product.description }}
          </p>
          <button (click)="share()">
            Share
          </button>
        </div>
      `,

})
export class ProductListComponent implements OnInit {
  @Input() products: Array<any> = [];
  // 产品Differ
  private productsDiffer: IterableDiffer<any>;
  constructor(private iterableDiffers: IterableDiffers) {}
  ngOnInit(): void {
    this.productsDiffer = this.iterableDiffers.find(this.products)
                                                                                            .create(this.trackByFn);
  }
  //
  ngDoCheck(): void {
    // IterableDiffer.diff
    const diff = this.productsDiffer.diff(this.products);
    if (diff) {
      console.log(''products is changed in ngDoCheck'');
    }
  }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes[''products'']) {
      console.log(''products changed in ngOnChanges'');
    }
  }

  private trackByFn(index: number, item: any) {
    return item.name;
  }
  share(): void {
    window.alert(''The product has been shared!'');
  }

}

今天关于AngularJS：自动检测模型的变化和angular自动化测试的讲解已经结束，谢谢您的阅读，如果想了解更多关于Angular 2的变化检测、angular – 检测变量的变化？、Angular 检测 API 中的变化、Angular 组件怎么检测Input为引用类型的变化 ?的相关知识，请在本站搜索。