Angular EventEmitter调用了多次

Question

这真的很奇怪，很难解释。我在一些服务中使用了EventEmitter，并且一直在使用它来更改我的视图数据。我遇到了一个更改路线的问题(通过链接或历史记录(，它似乎多次启动，正因为如此，它打乱了我的逻辑。

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

import { Injectable, Output, EventEmitter } from '@angular/core';
@Injectable()
export class ListService {
@Output() listChanged: EventEmitter<any[]> = new EventEmitter<any[]>()
constructor() { }
list() {
this.listChanged.emit([]);
}
}

然后在我的一条路线上，我只是这样做：

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应该只有一个项目(，但如果你打开控制台看一看，你会发现每次从一个视图返回时，它都会触发额外的时间。

• 因此，第一次访问时，您将看到控制台输出一次
• 清除控制台并在视图之间移动，您将看到控制台输出两次
• 清除控制台并在视图之间移动，您将看到控制台输出三次

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

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

有人能告诉我为什么会发生这种事以及如何阻止它吗？

Answer 1

这是因为当您的组件破坏时，您并没有终止订阅(每次您的产品组件初始化时都会创建新的订阅，从而导致内存泄漏(

将订阅分配给一个类变量，使用ngOnDestroy()钩子终止订阅。

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

Answer 2

我有一个简短的方法来解决您的问题

export class ProductsComponent implements OnInit {
count: any[] = [];
isAlowToSub: boolean = true;
constructor(
private listService: ListService
) { }

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