如何在容器中放置一个dynamic组件

我想创builddynamic组件并将这些组件的视图插入到容器中。

我认为这可以通过ViewContainerRef来实现。

但我不知道，我们可以得到任何组件的ViewContainerRef ？ 如果是的话那怎么样？ 我是Angular的新手，如果还有其他好的解决scheme可以处理这种情况，请给我build议。

更新我认为，我非常接近解决scheme。 下面是代码。

app.component.ts

 import {Component} from '@angular/core'; import {ContainerComponet} from './container.component' @Component({ selector: 'my-app', template: ` <container> </container> `, 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() { } } 

产量

 <my-app> <container>container</container><controlbox _ngcontent-lsn-3="">controlBox</controlbox> </my-app> 

预期结果

 <my-app> <container>container <controlbox _ngcontent-lsn-3="">controlBox</controlbox> </container> </my-app> 

Answer 1

您可以通过或从当前组件的视图中的元素获取当前组件的ViewContainerRef

 @Component({ selector: '...', directives: [OtherComponent, FooComponent], template: ` <other-component></other-component> <foo-component #foo></foo-component> <div #div></div>` }) 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); }); } 

另请参阅Angular 2dynamic选项卡，用户单击选定的组件

Answer 2

我为我的应用程序做了这样的事情。 在表中加载数据。

为此我创build了一个指令：

 directives: [TableDirective] 

然后我就这样使用它：

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

TableDirective文件：

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

这将加载我的表中的数据，取决于我发送的指令。 举个例子 ：

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

我也是Angular的新手：x

Answer 3

我也在寻找这个问题的解决scheme。

我能做到这一点的唯一方法是使用一个额外的Component

 import {Component, ViewContainerRef} from '@angular/core'; @Component({ selector: 'sw-view-container-ref', template: `<div></div>` }) 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<sw-view-container-ref #swViewContainerRef></sw-view-container-ref>', 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) { } } 

它应该产生类似的东西。

 <my-app> <container>container <sw-view-container-ref><div></div></sw-view-container-ref> <controlbox>controlBox</controlbox> </container> </my-app> 

我不确定我的例子是否清晰或正在工作，随意提出问题或提出build议，我会尝试回答和更新我的例子。