我有一个父组件(CategoryComponent)、一个子组件(videoListComponent)和一个ApiService。
我的大部分工作都很好,即每个组件都可以访问jsonapi,并通过可观测获取相关数据。
目前,视频列表组件只获取所有视频,我想将其过滤为特定类别中的视频,我通过@Input()将categoryId传递给孩子来实现这一点。
类别组件.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list>
这是有效的,当父CategoryComponent类别发生更改时,categoryId值将通过@Input()传递,但我需要在VideoListComponent中检测到这一点,并通过APIService(使用新的categoryId)重新请求视频数组。
在AngularJS中,我会对变量进行$watch。处理此问题的最佳方法是什么?
您也可以将EventEmitter作为输入传递。不太确定这是否是最佳实践,尽管。。。
类别组件:
categoryIdEvent: EventEmitter<string> = new EventEmitter<>();
- OTHER CODE -
setCategoryId(id) {
this.category.id = id;
this.categoryIdEvent.emit(this.category.id);
}
类别组件.html:
<video-list *ngIf="category" [categoryId]="categoryIdEvent"></video-list>
在VideoListComponent.ts中:
@Input() categoryIdEvent: EventEmitter<string>
....
ngOnInit() {
this.categoryIdEvent.subscribe(newID => {
this.categoryId = newID;
}
}