我有一个父组件（CategoryComponent）、一个子组件（videoListComponent）和一个ApiService。
我的大部分工作都很好，即每个组件都可以访问jsonapi，并通过可观测获取相关数据。
目前，视频列表组件只获取所有视频，我想将其过滤为特定类别中的视频，我通过@Input（）将categoryId传递给孩子来实现这一点。
类别组件.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list>
这是有效的，当父CategoryComponent类别发生更改时，categoryId值将通过@Input（）传递，但我需要在VideoListComponent中检测到这一点，并通过APIService（使用新的categoryId）重新请求视频数组。
在AngularJS中，我会对变量进行$watch。处理此问题的最佳方法是什么？
当前回答
您还可以在父组件（CategoryComponent）中的更改时触发一个可观察值，并在子组件的子属性中执行您想要执行的操作。（视频列表组件）
服务.ts
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);
类别组件.ts
public onCategoryChange(): void {
service.categoryChange$.next();
}
视频列表组件.ts
public ngOnInit(): void {
service.categoryChange$.subscribe(() => {
// do your logic
});
}
其他回答
基本上，这两种建议的解决方案在大多数情况下都很好。我对ngOnChange（）的主要负面体验是缺乏类型安全性。
在我的一个项目中，我进行了一些重命名，之后一些魔术字符串保持不变，当然这个bug需要一些时间才能浮出水面。
setter没有这个问题：您的IDE或编译器会让您知道任何不匹配。
您还可以在父组件（CategoryComponent）中的更改时触发一个可观察值，并在子组件的子属性中执行您想要执行的操作。（视频列表组件）
服务.ts
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);
类别组件.ts
public onCategoryChange(): void {
service.categoryChange$.next();
}
视频列表组件.ts
public ngOnInit(): void {
service.categoryChange$.subscribe(() => {
// do your logic
});
}
如果您正在处理使用@Input在父组件和子组件之间共享数据的情况，则可以使用生命周期方法检测@Input数据更改：ngOnChanges
ngOnChanges(changes: SimpleChanges) {
if (!changes.categoryId.firstChange) {
// only logged upon a change after rendering
console.log(changes.categoryId.currentValue);
}
}
我建议您注意为子组件实施的更改策略，因为某些性能原因，您应该添加ChangeDetectionStrategy.OnPush：
示例代码：
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class VideoListComponent implements OnChanges {
@Input() categoryId: string;
可以使用ngOnChanges（）生命周期方法
@Input() inputValue: string;
ngOnChanges(changes: SimpleChanges) {
console.log(changes['inputValue'].currentValue);
}
我会坚持采用@alan-c-s建议的方法，但需要做一些修改。首先，我反对使用ngOnChanges。相反，我建议将所有需要更改的内容移到一个对象下。并使用BehaviorSubject跟踪其变化：
private location$: BehaviorSubject<AbxMapLayers.Location> = new BehaviorSubject<AbxMapLayers.Location>(null);
@Input()
set location(value: AbxMapLayers.Location) {
this.location$.next(value);
}
get location(): AbxMapLayers.Location {
return this.location$.value;
}
<abx-map-layer
*ngIf="isInteger(unitForm.get('addressId').value)"
[location]="{
gpsLatitude: unitForm.get('address.gpsLatitude').value,
gpsLongitude: unitForm.get('address.gpsLongitude').value,
country: unitForm.get('address.country').value,
placeName: unitForm.get('address.placeName').value,
postalZip: unitForm.get('address.postalZip').value,
streetName: unitForm.get('address.streetName').value,
houseNumber: unitForm.get('address.houseNumber').value
}"
[inactive]="unitAddressForm.disabled"
>
</abx-map-layer>
