Input改变时如何使用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 函数。否则，您无法通过 @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 的一部分），我也不能这样做，因为模板需要访问它。下划线表示这样的 public 成员不属于 API.

Input改变时如何使用Angular setter？

How to use Angular setter when Input changed?

setter

eventsetter

angular