清除消息服务 Click EventEmitter 消息历史

Question

我在共享 header 中有一个组件，只要单击它就会发出带有消息的单击事件。我有多个包含组件的页面，每个组件都订阅此 MessageService 并根据点击事件采取行动。

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

有没有办法在发送之前清除旧消息？

Header 按钮代码：

<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);
});

当我跳转到 "new page"（单页应用程序）时。上一页上发送的所有消息都已发送并记录。

示例：

Click Header

Logs start and end (2 logs - expected)

Click to new tab

Click Header

Logs start, end, start, end (4 logs - not expected)

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();
}

清除消息服务 Click EventEmitter 消息历史

Clear MessageService ClickEventEmitter message history

eventemitter

angular