Question

我正在开发一个实时聊天应用程序。

我有一个有效的chat-component.ts：它允许2个用户使用socket.io互相聊天。目前我有这样的事情：

{ path: 'chat/:profile/:profileId/:user/:userId/:timeIdentifier', component: ChatComponent, canActivate: [AuthGuard,RoomGuard] }

当用户加入此路线时，会与socket.io建立连接，并允许他根据路线参数在特定房间内聊天。

我还使用RouteReuseStrategy，这样用户就可以在不离开聊天的情况下浏览应用程序。 How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2

我想要做的是允许1个用户使用相同的chat-component.ts同时与多个用户聊天。

我不知道如何才能做到这一点。

现在，当我尝试同时使用聊天组件倍数时，会带来很多错误：同时运行的组件的多个实例会导致它们彼此冲突，如似乎angular不知道有不同的实例（但只有一个实例重新运行）。

我在考虑为每个组件实例提供一个uniq ID，但我不知道该怎么做。

我不确定自己已经说清楚，但感谢你的帮助

编辑：

chat-component.ts

ngOnInit() : void
{ 
  this.tokenUser = this.userService.getUserFromToken();

  const subs = this.route.params.subscribe(params => {

    this.profile = params['profile'];
    this.profile_id = params['profileId'];
    this.customer = params['user'];
    this.customer_id = params['userId'];
    this.room = this.profile + '/' + this.customer;

    //Storing the joined room in a Room Array
    this.data.addRoomArr(this.router.url);

    //Joining the room (socket.io)
    this.joinRoom(this.room, this.profile_id, this.customer_id);
    this.sendNotification(Action.JOINED);

  });
  this.subs.add(subs);

  [...]
}

我想要实现的是多次重复使用此组件（加入多个房间）。

但是如果已经创建了组件（意味着用户已经加入了一个房间），我无法设法使用不同数据重新创建组件（ differents url params）这样用户就可以同时加入第二个房间。

当我尝试重新创建组件时（通过使用相同的路径但使用不同的参数），Angular实际上重用了已经创建的相同组件，从而导致了很多错误。

我认为我需要做的是创建一个兄弟组件，完全独立于创建的第一个组件。

Angular：同时使用相同组件的多次，使用不同的数据

0 个答案: