Question

我在共享标头中有一个组件，只要点击它就会发出一条带有消息的点击事件。我有多个包含组件的页面，每个组件都订阅此MessageService并对点击事件起作用。

问题在于，当我切换到新页面时，所有以前的消息都会被广播以及新消息。

有没有办法在发送之前清除旧邮件？

标题按钮代码：

<div id="applyDate">
    <button (click)="applyClick()" id="applyBtn" class="btn btn-success btn-sm">Apply</button>
</div>

applyClick(){
    this.messageService.clickEventEmitter.emit("Start^"+this.start+"|End^"+this.end);
}

组件订阅：

this.subscription = this.messageService.clickEventEmitter.subscribe(message => {
    let segs = message.split("|");
    this.start = segs[0].split("^")[1];
    this.end = segs[1].split("^")[1];

    console.log(this.start);
    console.log(this.end);
});

当我跳到＆＃34;新页面＆＃34; （单页面应用）。发送并记录上一页上发送的所有消息。

示例：

点击标题


日志开始和结束（2个日志 - 预期）


点击新标签


点击标题


记录开始，结束，开始，结束（4个日志 - 未预期）

Answer 1

第一个问题是，当组件被销毁时，我没有销毁订阅：

ngOnDestroy(){
    this.subscription.unsubscribe();
}

更大的问题是，由于我向订阅的所有组件播放类似的消息，因此他们都在挑选消息并对其进行操作。我收到邮件后，我决定重置每个订阅，这就解决了这个问题。

subscribe = () => {
    this.subscription = this.messageService.clickEventEmitter.subscribe(message => {
        let segs = message.split("|");
        this.start = segs[0].split("^")[1];
        this.end = segs[1].split("^")[1];

        console.log(this.start);
        console.log(this.end);
        this.resetSubscription();
    });  
}

resetSubscription = () => {        
    this.subscription.unsubscribe();
    this.subscribe();
}

清除MessageService ClickEventEmitter消息历史记录

1 个答案: