0

我有两个组件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在每次输入值更改时都被解雇。

4

1 回答 1

3

代替：

@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()'s 传递来自父组件的值。剩下的只是你想要什么的问题。例如，如果您想保存该值以供以后使用，则需要私有成员（或 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 的一部分。

于 2020-10-31T01:41:54.700 回答