我有一个父组件（CategoryComponent）、一个子组件（videoListComponent）和一个ApiService。
我的大部分工作都很好，即每个组件都可以访问jsonapi，并通过可观测获取相关数据。
目前，视频列表组件只获取所有视频，我想将其过滤为特定类别中的视频，我通过@Input（）将categoryId传递给孩子来实现这一点。
类别组件.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list>
这是有效的，当父CategoryComponent类别发生更改时，categoryId值将通过@Input（）传递，但我需要在VideoListComponent中检测到这一点，并通过APIService（使用新的categoryId）重新请求视频数组。
在AngularJS中，我会对变量进行$watch。处理此问题的最佳方法是什么？
当前回答
在组件中使用ngOnChanges（）生命周期方法。
ngOnChanges在数据绑定财产在检查视图和内容子项之前，如果至少其中一个已经改变了。
这是文件。
其他回答
我只想补充一点，如果@Input值不是基元值，还有一个名为DoCheck的Lifecycle钩子很有用。
我有一个数组作为输入，所以当内容发生变化时，这不会触发OnChanges事件（因为Angular所做的检查是“简单”的，而且不深入，所以即使数组上的内容发生了变化，数组仍然是一个数组）。
然后，我实现了一些自定义检查代码，以决定是否要使用更改后的Array更新视图。
如果不想使用ngOnChange实现og onChange（）方法，还可以通过valueChanges事件等订阅特定项的更改。
myForm = new FormGroup({
first: new FormControl(),
});
this.myForm.valueChanges.subscribe((formValue) => {
this.changeDetector.markForCheck();
});
markForCheck（）writen，因为在这个声明中使用：
changeDetection: ChangeDetectionStrategy.OnPush
可以使用ngOnChanges（）生命周期方法
@Input() inputValue: string;
ngOnChanges(changes: SimpleChanges) {
console.log(changes['inputValue'].currentValue);
}
此解决方案使用代理类并提供以下优点：
允许消费者利用RXJS的力量比目前提出的其他解决方案更紧凑比使用ngOnChanges（）更安全您可以通过这种方式观察任何类字段。
示例用法：
@Input()
num: number;
@Input()
str: number;
fields = observeFields(this); // <- call our utility function
constructor() {
this.fields.str.subscribe(s => console.log(s));
}
实用程序功能：
import { BehaviorSubject, Observable, shareReplay } from 'rxjs';
const observeField = <T, K extends keyof T>(target: T, key: K) => {
const subject = new BehaviorSubject<T[K]>(target[key]);
Object.defineProperty(target, key, {
get: () => subject.getValue() as T[K],
set: (newValue: T[K]) => {
if (newValue !== subject.getValue()) {
subject.next(newValue);
}
}
});
return subject;
};
export const observeFields = <T extends object>(target: T) => {
const subjects = {} as { [key: string]: Observable<any> };
return new Proxy(target, {
get: (t, prop: string) => {
if (subjects[prop]) { return subjects[prop]; }
return subjects[prop] = observeField(t, prop as keyof T).pipe(
shareReplay({refCount: true, buffer:1}),
);
}
}) as Required<{ [key in keyof T]: Observable<NonNullable<T[key]>> }>;
};
Demo
角度ngOnChanges
ngOnChanges（）是一个内置的Angular回调方法，在默认更改检测器检查数据绑定财产（如果至少有一个属性发生了更改）后立即调用。在视图和内容之前，将检查子级。
// child.component.ts
import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {
@Input() inputParentData: any;
constructor() { }
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
}
更多信息：Angular Docs
