如何检测@Input（）值在Angular中的变化？

我有一个父组件（CategoryComponent）、一个子组件（videoListComponent）和一个ApiService。

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

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

类别组件.html

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

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

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

当前回答

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

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

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

其他回答

您还可以在父组件（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
  });
}

在组件中使用ngOnChanges（）生命周期方法。

ngOnChanges在数据绑定财产在检查视图和内容子项之前，如果至少其中一个已经改变了。

这是文件。

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

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

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

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

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

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

编辑：

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

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

推荐文章