Como colocar um componente dynamic em um contêiner

Eu quero criar componentes dynamics e inserir exibições desses componentes em um contêiner.

Eu acho que isso pode ser alcançado por ViewContainerRef .

Mas eu não sei, podemos obter ViewContainerRef de qualquer componente? se sim, então como? Eu sou novo no Angular, se houver outras boas soluções disponíveis para lidar com esse cenário, por favor, sugira-me.

Atualizado eu acho, estou muito perto da solução. Abaixo está o código.

app.component.ts

 import {Component} from '@angular/core'; import {ContainerComponet} from './container.component' @Component({ selector: 'my-app', template: `   `, directives: [ContainerComponet] }) export class AppComponent { constructor() { } } 

container.component.ts

 import {Component, ComponentResolver, ViewContainerRef} from '@angular/core' import {controlBoxComponent as controlBox} from './controlBox.component'; @Component({ selector: 'container', template: 'container' }) export class ContainerComponet { constructor(viewContainer: ViewContainerRef, private _cr: ComponentResolver) { this._cr.resolveComponent(controlBox) .then(cmpFactory => { const ctxInjector = viewContainer.injector; return viewContainer.createComponent(cmpFactory, 0, ctxInjector); }) } } 

controlBox.component.ts

 import {Component} from '@angular/core' @Component({ selector: 'controlBox', template: 'controlBox' }) export class controlBoxComponent { constructor() { } } 

Saída

  containercontrolBox  

resultado esperado

  container controlBox   

Você pode obter o ViewContainerRef do componente atual por ou de um elemento na exibição do componente atual

 @Component({ selector: '...', directives: [OtherComponent, FooComponent], template: `   
` }) export class SomeComponent { // `ViewContainerRef` from an element in the view @ViewChild(OtherComponent, {read: ViewContainerRef}) other; @ViewChild('foo', {read: ViewContainerRef}) foo; @ViewChild('div', {read: ViewContainerRef}) div; // `ViewContainerRef` from the component itself constructor(private viewContainerRef:ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {} let factory = this.componentFactoryResolver.resolveComponentFactory(ControlBox) this.componentRef = this.other.createComponent(factory); // this.componentRef = this.foo.createComponent(factory); // this.componentRef = this.div.createComponent(factory); // this.componentRef = this.viewContainerRef.createComponent(factory); }); }

Veja também as guias dinâmicas do Angular 2 com componentes escolhidos pelo usuário

Eu estava procurando por uma solução para esse problema também.

A única maneira que consegui fazer foi usar um Component adicional

 import {Component, ViewContainerRef} from '@angular/core'; @Component({ selector: 'sw-view-container-ref', template: `
` }) export class SwViewContainerRef { private _viewContainerRef:ViewContainerRef; constructor(viewContainerRef:ViewContainerRef) { this._viewContainerRef = viewContainerRef; } get viewContainerRef():ViewContainerRef { return this._viewContainerRef; } }

container.component.ts

 import {Component, ComponentResolver, ViewContainerRef, AfterViewInit, ViewChild,Injector} from '@angular/core' import {controlBoxComponent as controlBox} from './controlBox.component'; import {SwViewContainerRef} from "./sw-view-container-ref"; @Component({ selector: 'container', template: 'container', directives: [SwViewContainerRef] }) export class ContainerComponet implements AfterViewInit { @ViewChild('swViewContainerRef', SwViewContainerRef) swViewChild:SwViewContainerRef; ngAfterViewInit() { this.desiredViewContainerRef = this.swViewChild.viewContainerRef; var self = this; this._cr.resolveComponent(controlBox).then((factory) => { var componentRef = self.desiredViewContainerRef.createComponent(factory, null, self.injector, null); componentRef.changeDetectorRef.detectChanges(); componentRef.onDestroy(()=> { componentRef.changeDetectorRef.detach(); }) return componentRef; }); } public desiredViewContainerRef:ViewContainerRef; constructor(private _cr: ComponentResolver, public injector:Injector) { } } 

Deve produzir algo semelhante a isso.

  container 
controlBox

Não tenho certeza se meus exemplos estão claros ou funcionando, sinta-se à vontade para fazer perguntas ou fazer sugestões, tentarei responder e atualizar meu exemplo.

Eu fiz algo parecido com o meu aplicativo. Para carregar dados em uma tabela.

Para fazer isso eu criei uma diretiva:

 directives: [TableDirective] 

E então eu uso assim:

 @ViewChild(TableDirective) tableDirective:TableDirective; ngAfterViewInit() { setTimeout(_=>this.load()); } load() { this.tableDirective.loadTable(*ADirectiveToLoad*); } 

O arquivo TableDirective:

 import { Component, DynamicComponentLoader, ViewContainerRef } from 'angular2/core'; @Component({ selector: "my-table", template: `` }) export class TableDirective { constructor( private dcl:DynamicComponentLoader, private viewContainerRef:ViewContainerRef) { } public loadTable(base:any) { this.viewContainerRef.clear(); this.dcl.loadNextToLocation(base, this.viewContainerRef); } } 

Isso carregará os dados na minha tabela, dependendo da Diretiva que eu enviar. Por exemplo :

 import { Component, OnInit } from 'angular2/core'; @Component({ selector: "my-data", templateUrl: "app/_includes/table/actionnaire/table.html" }) export class ActionnaireDirective implements OnInit { private entity:any; ngOnInit() { this.entity = ACTIONNAIRES_PORTEUR; } } var ACTIONNAIRES_PORTEUR:Actionnaire[] = [ {"id": 1, "nom": "Test", "prenom": "Testeur", "dateNaissance": "15/05/1995"} ]; export class Actionnaire { id:number; nom:string; prenom:string; dateNaissance:any; } 

Eu também sou novo com Angular: x