Несколько независимых экземпляров одного и того же компонента Angular

#angular

#angular

Вопрос:

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

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

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

Ответ №1:

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

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

Комментарии:

1. Это работает хорошо, спасибо вам. Но я снова сталкиваюсь с другой проблемой всякий раз, когда я отправляю сообщение из одного окна, которое оно получает во всех окнах. Я пытался применить эту логику take в этом, но не уверен, как этот take работает в этом. конструктор (private chatService: ChatService) { this.chatService. onNewMessageReceived().subscribe(данные => { console.log(данные); this.messages.push(данные); }); }

2. @Koders вы должны каким-то образом определить из потока сообщений, в какое окно оно должно быть направлено. Для этого вы можете использовать filter() канал

3. Спасибо за ваше предложение.