如何在 Angular 2 中取消订阅 EventEmitter？

Posted 2023-02-22

【中文标题】如何在 Angular 2 中取消订阅 EventEmitter？

【英文标题】：How to unsubscribe from EventEmitter in Angular 2?

【发布时间】：2016-07-29 10:00:04

【问题描述】：

export declare class EventEmitter<T> extends Subject<T> 
    /**
     * Creates an instance of [EventEmitter], which depending on [isAsync],
     * delivers events synchronously or asynchronously.
     */
    constructor(isAsync?: boolean);
    emit(value: T): void;
    /**
     * @deprecated - use .emit(value) instead
     */
    next(value: any): void;
    subscribe(generatorOrNext?: any, error?: any, complete?: any): any;

在官方 Angular 2 Typescript 定义中，似乎无法静音或取消订阅 EventEmitter。

随着页面使用相同的 EventEmitter，我得到了回调

【问题讨论】：

展示你是如何使用事件发射器的

【参考方案1】：

EventEmitter 扩展了 Subject。当您订阅某个主题时，您会收到一个 Subscription，您可以稍后使用它来取消订阅。

someOutput:EventEmitter = new EventEmitter();
...
this.subscription = someOutput.subscribe(...);
...
this.subscription.unsubscribe();

提示 不要将EventEmitter 用于除@Output()s 之外的任何其他内容。 Angular 不保证 EventEmitter 将继续扩展 Subject 甚至在未来与 Subject 类似。

【讨论】：

嘿，我相信你的提示现在生效了。我相信现在无法取消订阅返回的值，您能确认一下吗？

它仍然在 v5.x 中扩展了 Subject，所以它仍然可以工作 - github.com/angular/angular/blob/5.2.1/packages/core/src/…

【参考方案2】：

因为 EventEmitters 应该only be used to emit events from components，因此它们不应该被订阅，Angular 不需要提供取消订阅的方法。

如果您没有在组件中使用输出属性，请使用 Observable 或 Subject 代替 EventEmitter。

也许他们应该将名称更改为 OutputPropertyEmitter。

【讨论】：

你能告诉我如何在这个用例中使用 Observable 或 Subject 吗？

【参考方案3】：

正如 Günter Zöchbauer 所说，您可以按以下方式退订 EventEmitter：

someOutput: EventEmitter = new EventEmitter();
...
this.subscription = someOutput.subscribe(...);
...
this.subscription.unsubscribe();

既然 Angular 说你不应该将 EventEmitter 用于 @Output 以外的东西（取自 this 帖子）：

引用 Rob Wormald 的评论

[...] EventEmitter 实际上是一个 Angular 抽象，应该是 几乎仅用于在组件中发出自定义事件。 否则，只需像使用任何其他库一样使用 Rx。

这在 EventEmitter 的文档中说得很清楚。

使用 by 指令和组件来发出自定义事件。

相反，您应该使用 Rxjs 主题。 EventEmitter 扩展了 Rxjs 主题，这意味着您几乎可以以相同的方式使用它。虽然您必须使用 "subject.next()" 函数而不是 "eventEmitter.emit()"，但订阅和取消订阅的工作方式相同。

someOutput: EventEmitter = new Subject();
...
this.subscription = someOutput.subscribe(...);
...
this.subscription.unsubscribe();