Блог

Я новичок в 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 я зацикливаю объект messages для отображения
все сообщения.

Изображение с двумя экземплярами одного и того же компонента с уникальным заголовком, но часть сообщения заменяется на любую загрузку в последнем:

Я могу представить, что проблема в зависании subscription . Измените свой код, чтобы получить значение только один раз с помощью take оператора:

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