如何在Angular2中检测@Input（）值的变化
我有一个父组件（ CategoryComponent ），一个子组件（ videoListComponent ）和一个ApiService。
我大部分工作正常，即每个组件可以访问JSON API，并通过observables获取其相关数据。
目前的video列表组件只是获取所有的video，我想过滤这只是一个特定类别的video，我通过@Input()将categoryId传递给孩子来实现这一点。
CategoryComponent.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list>
这工作，当父类CategoryComponent类别更改然后categoryId值通过@Input()传递但我需要在VideoListComponent中检测到此并通过APIService（具有新的categoryId）重新请求video数组。
在angular1中，我会在variables上做一个$watch 。 处理这个问题的最好方法是什么？
实际上，当angular2 +中的子组件input发生变化时，有两种方法可以检测和处理：
-
您可以使用ngOnChanges（）生命周期方法 ，也可以在以前的答案中提到：
@Input() categoryId: string; ngOnChanges(changes: SimpleChanges) { this.doSomething(changes.categoryId.currentValue); // You can also use categoryId.previousValue and // categoryId.firstChange for comparing old and new values }文档链接： ngOnChanges， SimpleChanges， SimpleChange
演示例子：看看这个笨蛋 -
或者，您也可以使用input属性设置器 ，如下所示：
private _categoryId: string; @Input() set categoryId(value: string) { this._categoryId = value; this.doSomething(this._categoryId); } get categoryId(): string { return this._categoryId; }文档链接：看这里 。
演示例子：看看这个笨蛋 。
哪种方法应该使用？
如果你的组件有几个input，那么，如果你使用ngOnChanges（），你将在ngOnChanges（）中同时获得所有input的所有改变。 使用这种方法，您还可以比较已更改input的当前值和以前的值，并据此采取相应措施。
但是，如果只想在某个特定的input发生变化时执行某些操作（而不关心其他input），那么使用input属性设置器可能会更简单。 但是，这种方法并没有提供内置的方法来比较已更改input的前一个值和当前值（您可以使用ngOnChanges生命周期方法轻松完成此操作）。
编辑2017-07-25：angular度更改检测可能仍然不会在某些情况下火灾
通常， 如果数据是JS原始数据types（string，数字，布尔值），则只要父组件更改传递给子组的数据，setter和ngOnChanges的更改检测就会触发。 但是，在下列情况下，它不会触发，您必须采取额外的行动才能使其正常工作。
-
如果您正在使用嵌套对象或数组（而不是JS原始数据types）将数据从Parent传递给Child，则更改检测（使用setter或ngchanges）可能不会触发，也正如用户在答复中所述：muetzerich。 对于解决scheme看这里 。
-
如果你在angular度上下文之外（即，外部）改变数据，则angular度将不知道这些改变。 您可能必须在您的组件中使用ChangeDetectorRef或NgZone来使angular度知道外部变化，从而触发更改检测。 参考这个 。
在组件中使用ngOnChanges()生命周期方法。
在检查数据绑定属性之后，在检查视图和内容子项之前，如果至less其中一个已经更改，则调用ngOnChanges。
这里是文档 。
在函数签名中使用SimpleChangestypes时，在控制台以及编译器和IDE中出现错误。 为防止出现错误，请使用签名中的any关键字。
ngOnChanges(changes: any) { console.log(changes.myInput.currentValue); }
编辑：
正如Jon指出的那样，在使用括号表示法而不是点表示法时，可以使用SimpleChanges签名。
ngOnChanges(changes: SimpleChanges) { console.log(changes['myInput'].currentValue); }
我只是想添加一个名为DoCheck生命周期钩子，如果@Input值不是原始值，那么这个@Input很有用。
我有一个数组作为一个Input所以这不会触发OnChanges事件时，内容更改（因为Angular做的检查是'简单'，而不深，因此数组仍然是一个数组，即使arrays上的内容已经改变）。
然后，我实现一些自定义检查代码，以决定是否要更新我的视图与更改的数组。
你也可以在父组件（CategoryComponent）中有一个可触发的变化触发器，并在子组件中进行你想做的事情。 （videoListComponent）
service.ts public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1); ----------------- CategoryComponent.ts public onCategoryChange(): void { service.categoryChange$.next(); } ----------------- videoListComponent.ts public ngOnInit(): void { service.categoryChange$.subscribe(() => { // do your logic }); }
