当输入发生变化时，如何使用角度设置器

Question

我有两个组件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函数都会启动并在控制台中打印值。

如果我想获得结果，但使用ifSetters。在其他场景中，我可能有多个输入，并且我不希望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的一部分(，我也不能这样做，因为模板需要访问它。下划线表示这样的公共成员不是API的一部分。