输入更改时如何使用 Angular setter？

Question

我有两个组件，Parent Component并且Child component有一个在 中发生的 API Parent component，并且响应值被传递到child component。目前我正在使用，ngOnChanges但我想知道如何使用Setters。

假设ParentComponent我有以下代码：

<ChildComponent [apiResponse]="res" />

在ChildComponent我有这个：

@Input() apiResponse: any;

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

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

如果我想达到结果但使用 if Setters。与其他情况一样，我可能有多个输入，并且我不想ngOnChanges每次输入值更改时都被解雇。

Answer 1

代替：

@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 函数。如果没有它，您就无法通过 's 传入父组件的值@Input()。剩下的只是你想要什么的问题。例如，如果您想保存该值以供以后使用，则需要私有成员（或 aBehaviorSubject或您认为适合存储值的任何内容）：

@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 的一部分。