img - title html

AGREGAR y QUITAR componentes dinámicamente en angular

Question

Los documentos oficiales actuales solo muestran cómo cambiar dinámicamente componentes dentro de una etiqueta <ng-template> . https://angular.io/guide/dynamic-component-loader

Lo que quiero lograr es, digamos que tengo 3 componentes: header , section y footer con los siguientes selectores:

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

Y luego hay 6 botones que agregarán o eliminarán cada componente: Add Header , Add Section y Add Footer

y cuando hago clic en Add Header , la página agregará <app-header> a la página que lo muestra, por lo que la página contendrá:

<app-header>

Y luego, si hago clic en Add Section dos veces, la página ahora contendrá:

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

Y si hago clic en Add Footer , la página ahora contendrá todos estos componentes:

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

¿Es posible lograr esto en Angular? Tenga en cuenta que ngFor no es la solución que estoy buscando, ya que solo permite agregar los mismos componentes, no componentes diferentes a una página.

EDITAR: ngIf y ngFor no es la solución que estoy buscando, ya que las plantillas ya están predeterminadas. Lo que estoy buscando es algo así como una pila de componentes o una matriz de componentes donde podamos agregar, eliminar y cambiar cualquier índice de la matriz fácilmente.

EDIT 2: para que quede más claro, tengamos otro ejemplo de por qué ngFor no funciona. Digamos que tenemos los siguientes componentes:

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

Ahora aquí viene un nuevo componente, <app-description> , que el usuario quiere insertar entre y <app-editor> . ngFor solo funciona si hay un mismo componente que quiero repetir una y otra vez. Pero para diferentes componentes, ngFor falla aquí.

Answer 1

He creado una demostración para mostrar el proceso dinámico de agregar y quitar. El componente principal crea los componentes secundarios dinámicamente y los elimina.

Haga clic para ver la demostración

Componente principal

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);
}
}

Componente hijo

@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);
}

agregar referencias a app.module.ts

@NgModule({
declarations: [
ParentComponent,
ChildComponent
],
imports: [
//if using routing then add like so
RouterModule.forRoot([
{ path: '''', component: ParentComponent }
]),
],
entryComponents: [
ChildComponent,
],

Answer 2

Lo que está tratando de lograr se puede hacer creando componentes dinámicamente usando ComponentFactoryResolver y luego inyectándolos en ViewContainerRef . Una forma de hacer esto dinámicamente es pasar la clase del componente como un argumento de su función que creará e inyectará el componente.

Ver ejemplo a continuación:

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);
}
}
}

Notas:

1. Si desea facilitar la eliminación de los componentes más adelante, puede realizar un seguimiento de ellos en una variable local, consulte this.components . Alternativamente, puede recorrer todos los elementos dentro de ViewContainerRef .

2. Debe registrar su componente como componente de entrada. En la definición de su módulo, registre su componente como entryComponent ( entryComponents: [DraggableComponent] ).

Ejemplo de ejecución: https://plnkr.co/edit/mrXtE1ICw5yeIUke7wl5

Para más información: https://angular.io/guide/dynamic-component-loader