相同组件Angular的多个独立实例

Question

我是Angular的新手，尝试在应用程序中创建一个多窗口弹出框，并对所有窗口使用相同的组件，并且正在使用ComponentFactoryResolver加载窗口。

我能够加载一个窗口的多个实例而不会出现任何问题，并且能够将信息包括新的窗口标题（用户名）信息以及消息列表和用户名传递给新窗口，并且按预期保持唯一，但但是，所有消息都将替换为最后一个实例中的所有内容，并将所有消息替换为最后一个实例中的所有消息。

  

动态内容加载代码：

`loadSingleWindow(user_info)

 {
  const chatBoxFactory = this.componentFactoryResolver.resolveComponentFactory(WindowComponent);
  const viewContainerRef  = this.container;
 // viewContainerRef.clear();

    this.componentRef = viewContainerRef.createComponent(chatBoxFactory);
   // this.chatService.joinChat(user_info);

  const windowInstance = <WindowComponent>(this.componentRef.instance);
  windowInstance.chatUser = user_info;
  this.chatService.loadExistingMessage('').subscribe(data => {
    windowInstance.messages = data;
  });

}
destroyComponent() {
  this.componentRef.destroy();
}
`

WindowComponent如下所示。

export class ChatWindowComponent implements AfterViewInit {

  public messages: Array<ChatMessage> = [];
  activeRoom: any;

  public chatUser;

  ngAfterViewInit() {
      console.log('hello world');
  }
}

  

在WindowComponents视图中，我正在循环消息对象以显示   所有消息。

具有相同组件的两个实例的图像带有唯一的标头，但消息部分被最后一个加载的消息所取代：

Answer 1

我可以想象悬挂的subscription是问题所在。使用take运算符将代码更改为仅获取一次值：

this.chatService.loadExistingMessage('').pipe(
  take(1)
).subscribe(data => {
  windowInstance.messages = data;
});