Sockets 角度2路线更改未正确销毁部件

我有一个通信模块，其组件层次结构如下-

CommsComponent > ChannelsComponent > [ChannelComponent, ChannelComponent, n]

通信组件模板：

<div class="row m-t-md">
  <comms-channels></comms-channels>
</div>

<template ngFor let-channel [ngForOf]="channelService.channels | async">
   <comms-channel [channel]=channel
     [hidden]="channel.name !== selectedChannel?.name">
   </comms-channel>
</template>

<ul *ngFor="let message of messages">
   {{ message.text }}
</ul>  

MessageService-为每个通道创建到“/messages/{{channel}}”命名空间的新套接字连接

问题在于，在路由更改时（从通信URL导航，然后返回），会为每个通道重新创建消息套接字连接。更改路由时，现有套接字连接未正确重用，或者未正确销毁。刷新（F5）时，所有这些连接都将正确销毁，并再次建立正确数量的连接

分析：
我已经记录了这些事件，并注意到在URL上重新创建通道组件时发生了一次随机破坏，并将其更改回COMM。（在3和4之间）

1。页面加载时：
[constructor]通道服务
[constructor]SocketService创建
连接到“通道”的SocketService
[constructor]ChannelsComponent<已创建
[构造函数]通道组件-概述
[建造商]渠道组件-销售
[constructor]通道组件-订单
[constructor]消息服务-常规
[constructor]为常规创建的SocketService
[constructor]消息服务-销售
[constructor]为销售创建的SocketService
[constructor]消息服务-订单
[constructor]为订单创建的SocketService
连接到“消息/常规”的SocketService
连接到“消息/销售”的SocketService
连接到“邮件/订单”的SocketService
2.更改url时：
（恩贡）海峡-概述
（Ngondestory）渠道-销售
（Ngondestory）通道-订单
（Ngondestry）通道组件<已损坏
…加载新组件
3.在url更改回通讯时：
…销毁以前的组件
[constructor]ChannelsComponent<再次创建
[构造函数]通道组件-概述
[建造商]渠道组件-销售
[constructor]通道组件-订单
[constructor]消息服务-常规
[constructor]为常规创建的SocketService
[constructor]消息服务-销售
[constructor]为销售创建的SocketService
[constructor]消息服务-订单
[constructor]为订单创建的SocketService
什么在破坏这个？
（恩贡）海峡-概述
（Ngondestory）渠道-销售
（Ngondestory）通道-订单
（Ngondestory）>没有通道组件？<未销毁
再次创建。。。
[构造函数]通道组件-概述
[建造商]渠道组件-销售
[constructor]通道组件-订单
[constructor]消息服务-常规
[constructor]为常规创建的SocketService#
[constructor]消息服务-销售
[constructor]为销售创建的SocketService#
[constructor]消息服务-订单
[constructor]为订单创建的SocketService#
连接到“消息/常规”的SocketService
连接到“消息/销售”的SocketService
连接到“邮件/订单”的SocketService
连接到“消息/常规”的SocketService#
连接到“消息/销售”的SocketService#
连接到“邮件/订单”的SocketService#
4.更改url时：
重复第二步。

你的问题是什么？如果您的问题是“我的代码中出现这种行为的原因是什么？”，您不认为能够看到代码可能有助于回答这个问题吗？我的问题是，为什么在第3点中构建ChannelComponents之后，ChannelComponents会立即被销毁，然后立即重新创建？这个模块是一个大型解决方案的一部分，所以我试图展示相关的部分。

subscribeToChannelEvents() {
    let listenEvents = [ 'channel:connect', 'channel:create', 'channel:list' ];
    this.socket = new SocketService(this.config.apiEndpoint);
    this.socket
      .connect(this.socketName, this.listenEvents)
      .subscribe((socketEvent: ISocketEvent) => {
        this.listen(socketEvent);
      },
      error => console.log(error)
    );
  }

subscribeToMessages() {
      let listenEvents = [ 'message:sent', 'message:list' ];
      this.socket = new SocketService(this.url);
      this.socket
        .connect('messages/' + encodeURIComponent(this.channel.name), listenEvents)
        .subscribe((socketEvent: ISocketEvent) => { this.listen(socketEvent); },
          error => console.log(error)
        );
    }