Comment puis-je créer plusieurs instances d'un composant Angular ?

Question

J'ai commencé à apprendre Angular et je l'utilise maintenant pour créer une interface de chat.

Les principales parties seront une boîte affichant les messages de l'utilisateur et de l'assistant sous forme de bulles de texte, une boîte où l'utilisateur peut taper le texte qui sera envoyé au chat et un bouton pour envoyer le contenu de la boîte au chat.

J'ai créé un composant pour la bulle de texte de l'utilisateur. Comment puis-je faire en sorte que, lorsqu'une entrée est soumise, une nouvelle instance de UserTextBubble soit créée et ajoutée à la boîte de dialogue de chat à l'écran ?

Je sais que je peux créer un tableau et le parcourir pour afficher une liste à l'écran, mais si possible, je ne veux pas garder en mémoire toutes les entrées de la conversation. Je voudrais simplement pouvoir l'insérer à l'écran et la laisser là.

Answer 1

Vous pouvez traiter votre composant comme n'importe quel autre élément html et utiliser NgFor pour le parcourir en boucle en fournissant les données nécessaires.

faux.composant.html

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

Quelques bonnes informations sur l'interaction des composants dans la documentation. https://angular.io/guide/component-interaction

Answer 2

Vous pouvez utiliser ViewContainerRef pour ajouter dynamiquement des composants.

Pour cela, il suffit d'ajouter ng-template à votre composant html avec la référence du modèle.

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

Alors dans votre *.component.ts vous ajoutez UserTextBubbleComponent à la ng-template en utilisant ViewContainerRef

Pour obtenir ViewContainerRef à partir du modèle, vous pouvez utiliser le #chatContainer que vous avez défini à l'étape précédente pour y accéder en utilisant la fonction @ViewChild() .

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

Vous aurez également besoin de ComponentFactoryResolver donc l'ajouter à constructor()

constructor(private factory: ComponentFactoryResolver) {}

Pour ajouter un composant au #chatContainer vous pouvez utiliser cette méthode

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

Ce que cette méthode fait, c'est qu'elle crée ComponentFactoryResolver pour UserTextBubbleComponent ce qui vous permettra de le créer en createComponent .

La dernière ligne est là au lieu d'une @Input() à l'intérieur de la UserTextBubbleComponent .

Pour pouvoir l'utiliser de cette manière, vous devez également définir l'attribut textToDisplay à l'intérieur du composant.

Alors, ajoutez textToDisplay à l'intérieur de la UserTextBubbleComponent ce sera la valeur de la bulle de dialogue.

public textToDisplay: string;

Vous aurez probablement besoin d'ajouter le composant UserTextBubbleComponent à la liste des composants suivants entryComponents le tableau. A l'intérieur de AppModule ajouter ceci sous imports

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

J'ai également fait un exemple