Crear un componente angular2 con ng-content dinámicamente

Me gustaría establecer el cuerpo de al crear una instancia de un componente de forma dinámica utilizando ComponentFactoryResolver .

Veo que puedo acceder a la entrada y salida usando ComponentRef , pero no una forma de configurar .

Tenga en cuenta que Estoy planificando la configuración puede contener texto simple / puede abarcar componentes creados dinámicamente

 @Component({ selector: 'app-component-to-project', template: `` }) export class ComponentToProject implements AfterContentInit { ngAfterContentInit() { // We will do something important with content here } } @Directive({ selector: 'appProjectionMarker' }) export class ProjectionMarkerDirective implements OnInit { constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) { } ngOnInit() { const componentFactory: ComponentFactory = this.componentFactoryResolver.resolveComponentFactory(ComponentToProject); const componentRef: ComponentRef = this.viewContainerRef.createComponent(componentFactory); // Question: How to set content before the child's afterContentInit is invoked } } @Component({ selector: 'appTestComponent', template: `
` }) export class TestComponent {}

Hay un parámetro projectableNodes para el método vcRef.createComponent

 createComponent(componentFactory: ComponentFactory, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef): ComponentRef; 

Puede usarlo para inyectar dinámicamente un componente en otro.

Digamos que tenemos el siguiente componente

 @Component({ selector: 'card', template: ` 

Creating a angular2 component with ng-content dynamically

` }) export class CardComponent {}

Queremos crearlo dinámicamente e insertar algunos controles en sus ubicaciones de ng-content . Se podría hacer de la siguiente manera:

 const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent); const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent); let bodyRef = this.vcRef.createComponent(bodyFactory); let footerRef = this.vcRef.createComponent(footerFactory); const cardFactory = this.cfr.resolveComponentFactory(CardComponent); const cardRef = this.vcRef.createComponent( cardFactory, 0, undefined, [ [bodyRef.location.nativeElement], [footerRef.location.nativeElement] ] ); 

Ejemplo de Plunker

Ver también

  • ¿Por qué los nodos proyectables an any [] []?

  • Pawel Kozlowski – Crianza reactiva con Angular 2 – NG-BE 2016