如何链式调用EventEmitter的next方法？实现事件完成后执行后续代码

嘿，我来给你捋清楚这个问题哈～你写的这段代码是行不通的，原因很简单：EventEmitter.next()方法的返回值是void，根本没有onComplete()方法可以让你链式调用，直接这么写会触发语法报错哦。

那该怎么实现“发送事件并执行完成后运行其他代码”的需求呢？这里有两种靠谱的做法：

1. 最简单的同步执行方式 #

如果你的“后续代码”不需要依赖事件流的完成状态，只是想在发送事件后立刻执行，直接在.next()后面写代码就行：

@Output() myEvent = new EventEmitter<string>();

// 发送事件
this.myEvent.next('test string');
// 事件发送后立刻执行后续代码
console.log('done');

2. 利用RxJS操作符处理流完成场景 #

如果你确实需要在事件流完成后才执行代码（比如你手动结束了这个事件流），可以把EventEmitter当作Observable来处理，用finalize操作符来实现：

import { finalize } from 'rxjs/operators';

@Output() myEvent = new EventEmitter<string>();

// 先订阅事件流，用finalize指定流完成后要执行的逻辑
this.myEvent.pipe(
  finalize(() => console.log('done'))
).subscribe();

// 发送事件
this.myEvent.next('test string');
// 手动触发complete，因为EventEmitter默认不会自动完成事件流
this.myEvent.complete();

💡 小提醒：在Angular常规的组件通信场景里，@Output的EventEmitter一般不需要手动调用complete()，因为组件销毁时Angular会自动清理相关的订阅。只有当你明确需要主动结束这个事件流的时候，才需要调用这个方法。

内容的提问来源于stack exchange，提问作者John Glabb