gpt4 book ai didi

Angular2,取消订阅 ngOnDestroy 中的事件

转载 作者:太空狗 更新时间:2023-10-29 16:51:32 24 4
gpt4 key购买 nike

<分区>

在我的应用程序中,我有一些组件通过 EventService 进行通信。

@Injectable()
export class EventService {
public myEvent: EventEmitter<any> = new EventEmitter();
constructor() {}
}

此服务被注入(inject)到一个 EmitterComponent 中,该组件在单击按钮时发出事件

@Component({
selector: 'emitter',
template: `<button (click)="onClick()">Click me</button>`,
})
export class EmitterComponent {
constructor(private eventService:EventService) {}
onClick() {
this.eventService.myEvent.emit();
}
}

并在订阅事件的 ReceiverComponent 中为接收到的每个事件递增一个计数器

@Component({
selector: 'receiver',
template: `Count: {{count}}`,
})
export class ReceiverComponent {
public count = 0;
constructor(private eventService:EventService) {
this.eventService.myEvent.subscribe(() => this.count++;);
}
}

应用程序有多个 View (在本例中只有两个):PageAPageBEmitterComponentReceiverComponentPageA 中。每次我转到 PageB 并返回 PageA 时,都会创建一个新的 ReceiverComponent 并且当我单击 EmitterComponent< 中的按钮时,多次执行ReceiverComponent的事件回调函数。

为了避免这种情况,我从 ngOnDestroy 中的 myEvent 取消了 ReceiverComponent 的订阅

ngOnDestroy() {
this.eventService.myEvent.unsubscribe();
}

但这会导致以下异常

EXCEPTION: Error during instantiation of ReceiverComponent!.
ORIGINAL EXCEPTION: Error: Cannot subscribe to a disposed Subject

我怎样才能避免这种情况?如何正确退订?

为了更好地理解,我创建了这个 plunker您可以在控制台中看到错误和一些注释。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com