Angular2路线更改未正确破坏组件

Question

我有一个具有这样的组件层次结构的通信模块-

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>  

服务：
ChannelService-创建到'/ channels'名称空间的新套接字连接：

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

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

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

问题在于，在更改路由时（先导航离开通讯URL，然后返回），然后为每个通道重新创建消息套接字连接。 更改路由时，现有的套接字连接要么无法正确重用， 要么未被正确破坏。 刷新（F5）时，所有这些连接均被正确破坏，并再次建立正确数量的连接。

分析：
我记录了这些事件，并注意到在重新创建URL上的通道组件时将其随机销毁，然后改回comms。 （介于3和4之间）。

 1. On page load: [constructor] ChannelService [constructor] SocketService create SocketService Connected to 'channels' [constructor] ChannelsComponent < CREATED [constructor] ChannelComponent - General [constructor] ChannelComponent - Sales [constructor] ChannelComponent - Orders [constructor] MessageService - General [constructor] SocketService created for General [constructor] MessageService - Sales [constructor] SocketService created for Sales [constructor] MessageService - Orders [constructor] SocketService created for Orders SocketService Connected to 'messages/General' SocketService Connected to 'messages/Sales' SocketService Connected to 'messages/Orders' 2. On url change away: (ngOnDestroy) channel - General (ngOnDestroy) channel - Sales (ngOnDestroy) channel - Orders (ngOnDestroy) ChannelsComponent < DESTROYED … load new components 3. On url change back to communications: … destroy previous components [constructor] ChannelsComponent < CREATED AGAIN [constructor] ChannelComponent - General [constructor] ChannelComponent - Sales [constructor] ChannelComponent - Orders [constructor] MessageService - General [constructor] SocketService created for General [constructor] MessageService - Sales [constructor] SocketService created for Sales [constructor] MessageService - Orders [constructor] SocketService created for Orders WHAT IS DESTROYING THIS? (ngOnDestroy) channel - General (ngOnDestroy) channel - Sales (ngOnDestroy) channel - Orders (ngOnDestroy) > no ChannelsComponent? < NOT DESTROYED Created again... [constructor] ChannelComponent - General [constructor] ChannelComponent - Sales [constructor] ChannelComponent - Orders [constructor] MessageService - General [constructor] SocketService created for General # [constructor] MessageService - Sales [constructor] SocketService created for Sales # [constructor] MessageService - Orders [constructor] SocketService created for Orders # SocketService Connected to 'messages/General' SocketService Connected to 'messages/Sales' SocketService Connected to 'messages/Orders' SocketService Connected to 'messages/General' # SocketService Connected to 'messages/Sales' # SocketService Connected to 'messages/Orders' # 4. On url change away: REPEAT from no 2.