输入更改时如何使用角度设置器？

如何解决输入更改时如何使用角度设置器？

我有两个组件Parent Component和Child component，我有一个在Parent component中发生的API，响应值传递给了child component。当前我正在使用ngOnChanges，但是我想知道如何使用Setters。

假设在ParentComponent中，我有以下代码：

<ChildComponent [apiResponse]="res" />

在ChildComponent中，我有这个：

@input() apiResponse: any;

ngOnChanges(changes: SimpleChanges) {
    console.log(this.apiResponse)
}

每次apiResponse更改ngOnChanges函数都会触发并在控制台中打印该值。

如果我想获得结果，但可以使用if Setters。就像在其他情况下一样，我可能有多个输入，并且我不希望每次输入值更改时都触发ngOnChanges。

解决方法

代替：

@Input() apiResponse: any;

使用：

@Input() 
get apiResponse(): any {return this._apiResponse;}
set apiResponse(value: any) {
  this._apiResponse = value;
  console.log(value);
  // do whatever else you want to do here
}
private _apiResponse: any;

在上面的代码中，唯一真正需要的部分是setter函数。否则，您将无法通过@Input()传递父组件的值。剩下的只是您想要的事情。例如，如果您想保存值以备后用，则需要私有成员（或BehaviorSubject或任何您认为适合存储值的东西）：

@Input() 
set apiResponse(value: any) {
  this._apiResponse$.next(value);
  console.log(value);
  // do whatever else you want to do here
}
_apiResponse$: BehaviorSubject<any> = new BehaviorSubject<any>(null);

在上面的示例中，请注意，我尚未将该主题设为私人成员。我想您想在模板中使用它，因此，即使它应该是私有的（不是组件API的一部分），我也不能这样做，因为模板需要访问它。下划线是一种约定俗成的约定，表示公共成员不属于API。