¿Cómo crear componentes secundarios dentro de un componente principal y mostrarlos en la vista luego usando Angular2 ? ¿Cómo asegurarse de que los inyectables se inyecten correctamente en los componentes secundarios?
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. // Eg 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); Encontré DynamicComponentLoader en la vista previa de documentos API . Pero recibo el siguiente error cuando sigo el ejemplo: No hay una directiva de componente dinámico en el elemento 0
En general, este no es el enfoque que yo tomaría. En cambio, confiaría en el enlace de datos contra una matriz que generará más componentes secundarios a medida que se agregan objetos a la matriz de respaldo. Esencialmente componentes secundarios envueltos en un ng-for
Tengo un ejemplo aquí que es similar en el sentido de que genera 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
En Angular 2.0, el método loadIntoLocation de DynamicComponentLoader cumple este propósito de crear una relación padre-hijo. Al utilizar 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 componente principal y el boletín es mi componente secundario.
papel.componente.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'); } }boletín.componente.ts
import {Component} from 'angular2/core'; @Component({ selector: 'bulletin', template: '<div>Hi!</div>' } }) export class BulletinComponent {}papel.html
<div> <div #child></div> </div>En esta respuesta se mencionan algunas cosas de las que debe ocuparse.
Debe usar ComponentFactoryResolver y ViewElementRef para agregar componentes en tiempo de ejecución. Echemos un vistazo al código a continuación.
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.