多次调用 Angular EventEmitter

Question

这真的很奇怪，也很难解释。
我用过EventEmitter在我的一些服务中，我一直在使用它来更改我的 View 数据。
我遇到了更改路线(通过链接或通过历史返回)的问题，它似乎被多次触发，因此它搞乱了我的逻辑。

所以我在 stackblitz 上创建了一个测试，看看我是否可以重新创建它。
我做了一个简单的服务:

import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable()
export class ListService {
@Output() listChanged: EventEmitter<any[]> = new EventEmitter<any[]>()

  constructor() { }

  list() {
    this.listChanged.emit([]);
  }
}

然后在我的一条 route ，我只是这样做:

import { Component, OnInit } from '@angular/core';

import { ListService } from '../list.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  count: any[] = []

  constructor(
    private listService: ListService
  ) { }

  ngOnInit() {
    this.listService.listChanged.subscribe(() => {
      this.count.push('invoked');
      console.log('invoked');
      console.log('------');
    });
    this.listService.list();
  }
}

然后我创建了一个像这样的简单模板:

<p>
  Invoke should only be called once
</p>

<ul>
  <li *ngFor="let item of count">{{ item }}</li>
</ul>

当您在路线之间导航时，它看起来像预期的那样工作( ngFor 应该只有一个项目)，但是如果您打开控制台并查看一下，您每次去都会看到从一个 Angular 来看，它会触发额外的时间。

所以，第一次访问你会看到一次控制台输出。

清除控制台并在 View 之间移动，您将看到控制台输出两次。

清除控制台并在 View 之间移动，您将看到控制台输出 3 次.....

每次您交换 View 时，这种情况都会继续发生。
这是 stackblitz 链接，您可以自己查看。

https://stackblitz.com/edit/angular-sthags

谁能告诉我为什么会发生这种情况以及如何阻止它？

Answer 1

这是因为当您的组件销毁时您没有终止订阅(每次您的 Products 组件初始化时都会通过创建新订阅导致内存泄漏)

将订阅分配给类变量，使用 ngOnDestroy()钩子(Hook)杀死订阅。

subsVar: Subscription;

ngOnInit() {
    this.subsVar = this.listService.listChanged.subscribe(() => {
      this.count.push('invoked');
      console.log('invoked');
      console.log('------');
    });
}

ngOnDestroy() {
   if (this.subsVar) {
      this.subsVar.unsubscribe()
    }
}

https://stackblitz.com/edit/angular-9rvxgv?file=src/app/products/products.component.ts