javascript - example - crear componente con angular cli

Angular2: creación de componentes secundarios programáticamente

Question

Pregunta

¿Cómo crear componentes secundarios dentro de un componente principal y mostrarlos en la vista después usando Angular2 ? ¿Cómo asegurarse de que los inyectables se inyectan correctamente en los componentes del niño?

Ejemplo

import {Component, View, bootstrap} from ''angular2/angular2'';
import {ChildComponent} from ''./ChildComponent'';
@Component({
selector: ''parent''
})
@View({
template: `
<div>
<h1>the children:</h1>
<!-- ??? three child views shall be inserted here ??? -->
</div>`,
directives: [ChildComponent]
})
class ParentComponent {
children: ChildComponent[];
constructor() {
// when creating the children, their constructors
// shall still be called with the injectables.
// E.g. constructor(childName:string, additionalInjectable:SomeInjectable)
children.push(new ChildComponent("Child A"));
children.push(new ChildComponent("Child B"));
children.push(new ChildComponent("Child C"));
// How to create the components correctly?
}
}
bootstrap(ParentComponent);

Editar

Encontré el DynamicComponentLoader en la vista previa de los documentos API . Pero obtengo el siguiente error al seguir el ejemplo: No hay una directiva de componente dinámico en el elemento 0

Answer 1

Advertencia: DynamicComponentLoader ha quedado obsoleto en RC.4

En Angular 2.0, el método loadIntoLocation de DynamicComponentLoader sirve para crear una relación padre-hijo. Al usar este enfoque, puede crear dinámicamente una relación entre dos componentes.

Aquí está el código de muestra en el que el papel es mi padre y el boletín es mi componente secundario.

paper.component.ts

import {Component,DynamicComponentLoader,ElementRef,Inject,OnInit} from ''angular2/core'';
import { BulletinComponent } from ''./bulletin.component'';
@Component({
selector: ''paper'',
templateUrl: ''app/views/paper.html''
}
})
export class PaperComponent {
constructor(private dynamicComponentLoader:DynamicComponentLoader, private elementRef: ElementRef) {
}
ngOnInit(){
this.dynamicComponentLoader.loadIntoLocation(BulletinComponent, this.elementRef,''child'');
}
}

bulletin.component.ts

import {Component} from ''angular2/core'';
@Component({
selector: ''bulletin'',
template: ''<div>Hi!</div>''
}
})
export class BulletinComponent {}

paper.html

<div>
<div #child></div>
</div>

En esta respuesta, mencionamos algunas cosas de las que debe ocuparse.

Answer 2

Debería usar ComponentFactoryResolver y ViewElementRef para agregar componentes en tiempo de ejecución. Echemos un vistazo al código siguiente.

let factory = this.componentFactoryResolver.resolveComponentFactory(SpreadSheetComponent);
let res = this.viewContainerRef.createComponent(factory);

Coloque el código anterior dentro de su función ngOnInit y reemplace "SpreadSheetComponent" por el nombre de su componente.

Espero que esto funcione

Answer 3

El enfoque correcto depende de la situación que intentas resolver.

Si se desconoce el número de niños, entonces NgFor es el enfoque correcto. Si es fijo, como mencionó, 3 hijos, puede usar DynamicComponentLoader para cargarlos manualmente. Los beneficios de la carga manual es un mejor control sobre los elementos y una referencia a ellos dentro de los padres (que también se puede obtener usando plantillas ...)

Si necesita llenar los datos de los niños, esto también se puede hacer por inyección, al padre se le inyecta un objeto de datos poblando a los niños en su lugar ...

De nuevo, muchas opciones. He usado ''DynamicComponentLoader'' en mi ejemplo modal, https://github.com/shlomiassaf/angular2-modal

Answer 4

Generalmente este no es el enfoque que tomaría. En cambio, confiaría en la vinculación de datos con una matriz que generará más componentes secundarios a medida que los objetos se agreguen a la matriz de respaldo. Componentes esencialmente secundarios envueltos en ng-for

Tengo un ejemplo aquí que es similar en el sentido de que representa una lista dinámica de niños. No es 100% igual, pero parece que el concepto sigue siendo el mismo:

http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 5

Agregue componentes mediante programación a DOM en la aplicación angular 2/4

Necesitamos usar el método de ciclo de vida ngAfterContentInit() de AfterContentInit . Se invoca después de que el contenido de la directiva se haya inicializado por completo.

En parent-component.html , agregue el div como este:

<div #container> </div>

El archivo parent-component.ts ve así:

class ParentComponent implements AfterContentInit {
@ViewChild("container", { read: ViewContainerRef }) divContainer
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
ngAfterContentInit() {
let childComponentFactory = this.componentFactoryResolver.resolveComponentFactory(childComponent);
this.divContainer.createComponent(childComponentFactory);
let childComponentRef = this.divContainer.createComponent(childComponentFactory);
childComponentRef.instance.someInputValue = "Assigned value";
}
}

Dentro de src/app/app.module.ts , agregue la siguiente entrada a los parámetros del método @NgModule() :

entryComponents:[
childComponent
],

Tenga en cuenta que no estamos accediendo al div#container utilizando el @ViewChild("container") divContainer . Necesitamos su referencia en lugar de nativeElement . ViewContainerRef él como ViewContainerRef :

@ViewChild("container", {read: ViewContainerRef}) divContainer

ViewContainerRef tiene un método llamado createComponent() que requiere que se pase una fábrica de componentes como parámetro. Para lo mismo, necesitamos inyectar un ComponentFactoryResolver . Tiene un método que básicamente carga un componente.