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上的通道组件更改回通信。（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.

Angular2路由更改不会正确破坏组件

0 个答案: