我有一个父组件(CategoryComponent)、一个子组件(videoListComponent)和一个ApiService。

我的大部分工作都很好,即每个组件都可以访问jsonapi,并通过可观测获取相关数据。

目前,视频列表组件只获取所有视频,我想将其过滤为特定类别中的视频,我通过@Input()将categoryId传递给孩子来实现这一点。

类别组件.html

<video-list *ngIf="category" [categoryId]="category.id"></video-list>

这是有效的,当父CategoryComponent类别发生更改时,categoryId值将通过@Input()传递,但我需要在VideoListComponent中检测到这一点,并通过APIService(使用新的categoryId)重新请求视频数组。

在AngularJS中,我会对变量进行$watch。处理此问题的最佳方法是什么?


当前回答

基本上,这两种建议的解决方案在大多数情况下都很好。我对ngOnChange()的主要负面体验是缺乏类型安全性。

在我的一个项目中,我进行了一些重命名,之后一些魔术字符串保持不变,当然这个bug需要一些时间才能浮出水面。

setter没有这个问题:您的IDE或编译器会让您知道任何不匹配。

其他回答

@Input() set categoryId(categoryId: number) {
      console.log(categoryId)
}

请尝试使用此方法。希望这有帮助

基本上,这两种建议的解决方案在大多数情况下都很好。我对ngOnChange()的主要负面体验是缺乏类型安全性。

在我的一个项目中,我进行了一些重命名,之后一些魔术字符串保持不变,当然这个bug需要一些时间才能浮出水面。

setter没有这个问题:您的IDE或编译器会让您知道任何不匹配。

我只想补充一点,如果@Input值不是基元值,还有一个名为DoCheck的Lifecycle钩子很有用。

我有一个数组作为输入,所以当内容发生变化时,这不会触发OnChanges事件(因为Angular所做的检查是“简单”的,而且不深入,所以即使数组上的内容发生了变化,数组仍然是一个数组)。

然后,我实现了一些自定义检查代码,以决定是否要使用更改后的Array更新视图。

您也可以将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;
 }
}

在函数签名中使用SimpleChanges类型时,我在控制台、编译器和IDE中都遇到了错误。为了防止错误,请在签名中使用any关键字。

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

编辑:

正如Jon在下面指出的,当使用括号符号而不是点符号时,可以使用SimpleChanges签名。

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}