Question

我正在编写一个简单的组件，它将Id作为输入并调用服务方法来返回要显示的实体：

@Input() id: string;

ngOnInit(): void {
    if (this.id != undefined && this.id != "") {
        this.detailSubscription=this.service.load(this.id)
            .subscribe(result => {

                    this.detail$ = result;
                    this.cd.detectChanges();
            });
    }
}

ngOnDestroy() {
   this.cd.detach();
   this.detailSubscription.unsubscribe(); 
}

这个组件只是第一次使用。如果输入ID发生变化，则不会更新视图。

我还尝试将服务调用放在onChanges方法中，但由于取消订阅仅在onDestroy方法上调用一次，因此无法正常工作。

如何实现这一目标？

Answer 1

您需要使用ngOnChanges代替ngOnInit，如下所示。由于ngOnInit只会触发一次，因此每次输入值更改时都会触发ngOnChanges。

并且在致电服务之前尝试取消订阅。

 ngOnChanges(changes: SimpleChanges) {

   if (changes['id']) {
      if(this.detailSubscription) {
         this.detailSubscription.unsubscribe();
      }
      //call your service here
   }
}

Answer 2

使用getter / setter方法，您可以轻松拦截id输入属性的直接更改。例如：

private _id:string;
@Input('id')
set id(value:string){
   this._id = value;
   this.fetch();
}

get id(){
   return this._id;
}

 fetch(){
 if (this.id !== "") {
        this.detailSubscription=this.service.load(this.id)
            .subscribe(result => {

                this.detail$ = result;
        });
 }

}

ngOnDestroy() {
   this.detailSubscription.unsubscribe(); 
}

在输入更改和更新视图上调用服务

2 个答案: