Question

在我的应用中，我注意到了意想不到的行为可能我犯了一个错误，但我不知道在哪里。

场景：我有两个组成部分：父母和孩子。父模板包含＆＃39; * ngIf＆＃39;条件，可以显示或不显示孩子。父母和子女共享服务。孩子订阅活动。家长发出事件。

经过以下一系列步骤： 1.隐藏孩子 2.展示孩子 3.触发事件

事件处理n + 1次。其中n是试验次数。请举例说明：https://plnkr.co/edit/TWHO6PPYa55QGoHDXdFN

父组件模板：

<div *ngIf="show">
  <my-child-app></my-child-app>
</div>

家长相关班级代码：

show:boolean = true;
  constructor(private service: AppService) {
  }

  changeShow(){
    this.show = !this.show;
  }

  emitSome(){
    this.service.appEvent.emit("abc");
  }

代码的子代相关部分：

 constructor(private service: AppService) {
    this.service.appEvent.subscribe((s: string) => console.log(s));
  }

Answer 1

您需要在销毁组件时清理订阅。每次由于ngIf而显示孩子时，它都会调用重新订阅发射器的孩子的构造函数。修改您的代码以匹配以下内容：

export class ChildComponent implements OnDestroy {
    private eventSubscription;

    constructor(private service: AppService) {
        this.eventSubscription = this.service.appEvent
                                             .subscribe((s: string) => console.log(s));
    }

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

角度组合ngIf和EventEmitter创建多个调用

1 个答案: