Dynamiquement l'AJOUT et la SUPPRESSION de Composants Angulaire

Du cours officiel docs montre comment dynamiquement changement composants dans un <ng-template> tag. https://angular.io/guide/dynamic-component-loader

Ce que je veux réaliser est, disons que j'ai 3 composantes: header, section, et footer avec les sélecteurs suivants:

<app-header>
<app-section>
<app-footer>

Et puis il y a 6 boutons ajouter ou supprimer chaque composant: Add Header, Add Section, et Add Footer

et quand je clique sur Add Header, la page s'ajouter <app-header> à la page qui le rend, de sorte que la page va contenir:

<app-header>

Et puis si je clique sur Add Section deux fois, la page contient maintenant:

<app-header>
<app-section>
<app-section>

Et si je clique sur Add Footer, la page contient maintenant tous ces composants:

<app-header>
<app-section>
<app-section>
<app-footer>

Est-il possible de réaliser cela dans Angulaire? Notez que ngFor n'est pas la solution, je suis à la recherche, car elle permet seulement d'ajouter les mêmes composants, pas différents éléments d'une page.

EDIT: ngIf et ngFor n'est pas la solution, je suis à la recherche pour que les modèles sont déjà prédéterminé. Ce que je cherche, c'est quelque chose comme une pile de composants ou d'une gamme de composants où l'on peut ajouter, supprimer et modifier les index du tableau facilement.

EDIT 2: Pour le rendre plus clair, prenons un autre exemple de pourquoi ngFor ne fonctionne pas. Disons que nous avons les éléments suivants:

<app-header>
<app-introduction>
<app-camera>
<app-editor>
<app-footer>

Voici maintenant un nouveau composant, <app-description>, que l'utilisateur souhaite insérer dans entre et <app-editor>. ngFor ne fonctionne que si il y en a un même composant que je veux en boucle. Mais pour les différents composants, ngFor échoue ici.

Si elles sont connues, comme dans votre exemple, vous pourriez utiliser *ngIf sur l'en-tête et le pied de page *ngFor sur les sections.
ngIf et ngFor n'est pas la solution, je suis à la recherche pour que les modèles sont déjà prédéterminé. Ce que je cherche, c'est quelque chose comme une pile de composants ou d'une gamme de composants où l'on peut ajouter, supprimer et modifier les index du tableau facilement.
Cela peut aussi vous aider si vous souhaitez ajouter différents types de composants stackoverflow.com/questions/36325212/...
Merci! Cela pourrait être particulièrement utile que j'ai appris à connaître ngComponentOutlet
ngComponentOutlet manque encore quelques fonctionnalités de base. Il y a une pull request à l'adresse de ceux-ci depuis longtemps, mais qui n'avait pas encore fusionné autant que je sache. Donc, la lecture et la transmission de valeurs de/pour ajouter dynamiquement des composants ne fonctionne pas bien.

OriginalL'auteur Marcellino Corleone | 2017-07-06

  1. 32

    Ce que vous essayez d'atteindre peut être fait par la création de composants dynamiquement à l'aide de la ComponentFactoryResolver et puis les injecter dans un ViewContainerRef. Une façon de le faire dynamiquement en passant de la classe du composant comme un argument de votre fonction qui permettra de créer et d'injecter le composant.

    Voir l'exemple ci-dessous:

    import {
Component,
ComponentFactoryResolver, Type,
ViewChild,
ViewContainerRef
} from '@angular/core';
//Example component (can be any component e.g. app-header app-section)
import { DraggableComponent } from './components/draggable/draggable.component';
@Component({
selector: 'app-root',
template: `
<!-- Pass the component class as an argument to add and remove based on the component class -->
<button (click)="addComponent(draggableComponentClass)">Add</button>
<button (click)="removeComponent(draggableComponentClass)">Remove</button>
<div>
<!-- Use ng-template to ensure that the generated components end up in the right place -->
<ng-template #container>
</ng-template>
</div>
`
})
export class AppComponent {
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
//Keep track of list of generated components for removal purposes
components = [];
//Expose class so that it can be used in the template
draggableComponentClass = DraggableComponent;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
}
addComponent(componentClass: Type<any>) {
//Create component dynamically inside the ng-template
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
const component = this.container.createComponent(componentFactory);
//Push the component so that we can keep track of which components are created
this.components.push(component);
}
removeComponent(componentClass: Type<any>) {
//Find the component
const component = this.components.find((component) => component.instance instanceof componentClass);
const componentIndex = this.components.indexOf(component);
if (componentIndex !== -1) {
//Remove component from both view and array
this.container.remove(this.container.indexOf(component));
this.components.splice(componentIndex, 1);
}
}
}

    Notes:

    1. Si vous voulez faire plus facile de retirer les composants plus tard, vous pouvez garder une trace d'eux dans une variable locale, voir this.components. Alternativement, vous pouvez faire une boucle sur tous les éléments à l'intérieur de la ViewContainerRef.

    2. Vous devez enregistrer votre composant d'une entrée composante. Dans votre définition de module inscrire votre composant comme un entryComponent (entryComponents: [DraggableComponent]).

    Exemple:
    https://plnkr.co/edit/mrXtE1ICw5yeIUke7wl5

    Pour plus d'informations:
    https://angular.io/guide/dynamic-component-loader

    Merci! Cela pourrait être la solution que je cherche, mais je n'ai pas essayé encore. Auriez-vous l'obligeance de fournir un Plunker?
    J'ai ajouté un plunker à la réponse. Merci de voir https://plnkr.co/edit/mrXtE1ICw5yeIUke7wl5. Espérons que cette aide.
    J'ai édité le Plunker inclure les différents types de composants (foo et bar) et cela fonctionne! Merci beaucoup! plnkr.co/modifier/tMR2ahkb5VRpWCIh2Jvb?p=preview
    Excellent exemple de code et de. Je cherchais exactement ce. Je voudrais seulement suggérer l'édition de ce "const = ce.des composants.trouver..." à "const = ce.des composants.reverse().trouver..." afin de supprimer la dernière inséré composant. Ou ajouter un id de suivi spécifiques.
    Il y a aussi un tutoriel à ce sujet ici: courses.ultimateangular.com/courses/angular-pro/lectures/...

    OriginalL'auteur Ash Belmokadem

  2. 8

    J'ai créé une démo pour montrer la dynamique d'ajouter et de supprimer des processus.
    Composant Parent crée l'enfant composants dynamiquement et les supprime.

    Cliquez sur pour la démo

    Composant Parent

    import { ComponentRef, ComponentFactoryResolver, ViewContainerRef, ViewChild, Component } from "@angular/core";
@Component({
selector: 'parent',
template: `
<button type="button" (click)="createComponent()">
Create Child
</button>
<div>
<ng-template #viewContainerRef></ng-template>
</div>
`
})
export class ParentComponent implements myinterface {
@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;
//manually indexing the child components for better removal
//although there is by-default indexing but it is being avoid for now
//so index is a unique property here to identify each component individually.
index: number = 0;
//to store references of dynamically created components
componentsReferences = [];
constructor(private CFR: ComponentFactoryResolver) {
}
createComponent() {
let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
let currentComponent = componentRef.instance;
currentComponent.selfRef = currentComponent;
currentComponent.index = ++this.index;
//prividing parent Component reference to get access to parent class methods
currentComponent.compInteraction = this;
//add reference for newly created component
this.componentsReferences.push(componentRef);
}
remove(index: number) {
if (this.VCR.length < 1)
return;
let componentRef = this.componentsReferences.filter(x => x.instance.index == index)[0];
let component: ChildComponent = <ChildComponent>componentRef.instance;
let vcrIndex: number = this.VCR.indexOf(componentRef)
//removing component from container
this.VCR.remove(vcrIndex);
this.componentsReferences = this.componentsReferences.filter(x => x.instance.index !== index);
}
}

    Composant Enfant

    @Component({
selector: 'child',
template: `
<div>
<h1 (click)="removeMe(index)">I am a Child, click to Remove</h1>
</div>
`
})
export class ChildComponent {
public index: number;
public selfRef: ChildComponent;
//interface for Parent-Child interaction
public compInteraction: myinterface;
constructor() {
}
removeMe(index) {
this.compInteraction.remove(index)
}
}
//Interface
export interface myinterface {
remove(index: number);
}

    ajouter des références à la app.le module.ts

    @NgModule({
declarations: [
ParentComponent,
ChildComponent
],
imports: [
//if using routing then add like so
RouterModule.forRoot([
{ path: '', component: ParentComponent }
]),
],
entryComponents: [
ChildComponent,  
],
    Vous pouvez remplacer .filter(x => x.instance.index == index)[0] par .find(...)
    Oui, vous avez raison, mais qui ont le vieux jours copain quand j'ai écrit cela 😉

    OriginalL'auteur WasiF