Question

我知道...有很多这样的主题，但是我检查了很多主题，但没有一个适用于我的问题：您可以检测到组件属性的变化，可以执行DoCheck，但是变量必须是数组或可迭代的（例如，不能是简单的字符串）。也可以使用Subject，但是要设置变量，您需要使用一种方法，由于某种原因，我不知道在那之后如何获取值。无论如何，我需要一个非常简单的东西：一个与AngularJS的$ watch相同的解决方案：可以一直观察变量的任何变化。可以在这种情况下使用的方法：

import {Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
  }
  myVar = {
products : ['Alpha', 'Bravo', 'Charlie', 'Alpha' ],
dummy: 'Hello'
};
removeItem(i) {
  this.myVar.products.splice(i,1);
}
setDummy() {
  this.myVar.dummy = 'Hi !';
}
addNewKey() {
 this.myVar['newKey'] = 'Yellow';
}
addnewArray() {
  this.myVar['colors'] = ['Yellow', 'Pink', 'Blue'];
}
}

无论myVar发生什么变化，我都希望对其进行跟踪。如何存档？

Answer 1

想到一些选择：

1）您可以使用NgRx。每次数据更改时提供通知都做得很好……但这是向应用程序中添加NgRx的重要一步。

2）您可以构建服务来管理阵列。该阵列将在该服务中是私有的，并且需要该阵列的每个组件都需要注入服务。然后，该服务可以提供添加/删除选项，以便您始终知道这些操作何时发生。

然后，您可以在每次修改数组时使用Subject或BehaviorSubject提供通知。

3）根据需要通知变更的内容，您可以利用Angular的内置变更检测功能。但这仅反映在模板中绑定的属性中。

以上述＃2为例：

export class ProductService {
    private productsUrl = 'api/products';

    private selectedProductSource = new BehaviorSubject<IProduct | null>(null);
    selectedProductChanges$ = this.selectedProductSource.asObservable();

    constructor(private http: HttpClient) { }

    changeSelectedProduct(selectedProduct: IProduct | null): void {
        this.selectedProductSource.next(selectedProduct);
    }

}

在此代码中，我跟踪“选定产品”并在更改后发出通知。

您需要更改此代码以观察对myVar对象的更改。您将拥有removeItem，setDummy和addXXX方法，而不是changeSelectedProduct。这些方法中的每一个都可以调用.next来提供更改通知。

Angular 5-检测变量的变化

1 个答案: