Как я могу создать несколько экземпляров углового компонента?

Question

Я начал изучать Angular и теперь использую его для создания интерфейса чата.

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

Я создал Компонент для текстового пузыря пользователя. Как сделать так, чтобы при отправке ввода создавался новый экземпляр UserTextBubble, который добавлялся в диалог чата на экране?

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

Answer 1

Вы можете использовать ViewContainerRef для динамического добавления компонентов.

Для этого вы можете просто добавить ng-template к вашему компоненту html файл со ссылкой на шаблон.

<ng-template #chatContainer></ng-template>

Затем в вашем *.component.ts вы добавляете UserTextBubbleComponent к ng-template, используя ViewContainerRef

Чтобы получить ViewContainerRef из шаблона, вы можете использовать #chatContainer, который вы определили на предыдущем шаге, чтобы получить к нему доступ с помощью @ViewChild().

@ViewChild('chatContainer', {read: ViewContainerRef}) vc: ViewContainerRef;

Вам также понадобится ComponentFactoryResolver, поэтому добавьте его к constructor()

constructor(private factory: ComponentFactoryResolver) {}

Чтобы добавить компонент к #chatContainer, вы можете использовать этот метод

  addComponent(text) {
    const factory = this.factory.resolveComponentFactory(UserTextBubbleComponent);
    const componentRef = this.vc.createComponent(factory);
    (componentRef.instance).textToDisplay = text;
  }

Этот метод делает то, что он создает ComponentFactoryResolver для UserTextBubbleComponent, что позволит вам создать его с помощью createComponent.

Последняя строка вместо @Input() внутри UserTextBubbleComponent.

Чтобы использовать его таким образом, вам также необходимо определить textToDisplay внутри компонента.

Так что добавьте textToDisplay внутри UserTextBubbleComponent, это будет значение пузыря чата.

public textToDisplay: string;

Возможно, вам также понадобится добавить UserTextBubbleComponent в массив entryComponents. Внутри AppModule добавьте это под imports

 @NgModule({
  imports:      [ BrowserModule, ...],
  declarations: [ AppComponent, UserTextBubbleComponent, ...],
  bootstrap:    [ AppComponent],
  entryComponents: [UserTextBubbleComponent, ...]
})
export class AppModule { }

Я также сделал пример

Answer 2

Вы можете обращаться с вашим компонентом как с любым другим html-элементом и использовать NgFor для его циклического предоставления всех необходимых данных.

fake.component.html

<div>
  <your-component-selector-name *ngFor="let array of yourArry"></your-component-selector-name>
</div>

некоторая полезная информация о взаимодействии компонентов из документов https://angular.io/guide/component-interaction