Загружать динамический компонент несколько раз с разными данными

Мне нужно загрузить динамический компонент несколько раз и передать данные динамически на основе некоторого значения, чтобы он загружался с данными runTime.

Я пробовал ниже пример https://dzone.com/articles/how-to-dynamically-create-a-component-in-angular

в качестве примера у нас есть один компонент сообщения, у которого есть свойство «сообщение», а в hostComponent мы добавляем один шаблон в файл html, например

<div style="text-align:center">
     <h1>
         Welcome to {{ title }}!
     </h1>
     <template #messagecontainer>
     </template>
 </div>

так что здесь вместо тега шаблона наш messageComponent заменит.

Мне нужно что-то вроде того, что мы можем повторять этот шаблон несколько раз и динамически передавать другое значение «message» в messageComponent.


typescript angular angular-dynamic-components
person Sumit Sharma    schedule 11.09.2019    source источник
comment
Итак, вы хотите, чтобы значение свойства message обновлялось в динамическом компоненте каждый раз, когда оно изменяется или хотите, чтобы несколько динамических компонентов создавались с разными сообщениями?   -  person Narm    schedule 11.09.2019
comment
я хочу, чтобы несколько динамических компонентов были сгенерированы с разными сообщениями, и мы можем обновлять значения сообщений при любом событии щелчка   -  person Sumit Sharma    schedule 13.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вот мой подход:

  • в вашем шаблоне создайте контейнер для всех сообщений
<ng-container #messageContainer></ng-container>
  • добавить функцию, которая позволит нам создать компонент и вставить его в представление
private createComponent (compClass) {
   const compFactory = this.cfr.resolveComponentFactory(compClass);

   return this.messageContainer.createComponent(compFactory);;
 }
  • загружать компонент несколько раз в зависимости от входящих данных; мы также будем отслеживать загруженные компоненты, чтобы иметь возможность уничтожить их, когда нам понадобится загрузить другой динамический компонент.
 private loadNewComponentList () {
   this.messages.forEach((msg, idx) => {
     this.destroyCompFromList(this.componentList[idx]);

     const comp = this.createComponent(componentMap[this._crtComp]);

     (comp.instance as any).message = msg;

     comp.changeDetectorRef.detectChanges();

     this.componentList[idx] = comp;
   });
 }

Вот демонстрация StackBlitz < / а>.

person Andrei Gătej    schedule 11.09.2019
comment
Я пытался использовать comp.changeDetectorRef.detectChanges();, но он останавливает цикл, поэтому другие компоненты не создаются - person Jaydeep; 04.02.2020