angular2中的可投影节点是什么

例如,我们可以通过以下方式创建节点元素：

var myNode = document.createElement('div');
var text = document.createTextNode('this is my text');
myNode.appendChild(text);

然后我们可以使用上面的节点,方法如下：

constructor(private vcr:ViewContainerRef ) {

}
ngAfterViewInit() {

  let cmpFactory = this.vcr.resolveComponentFactory(MyDynamicComponent);
  let injector = this.vcr.parentInjector;

  var myNode = document.createElement('div');
  var text = document.createTextNode('this is my text');
  myNode.appendChild(text);
  this.vcr.createComponent(cmpFactory,injector,[ [ myNode ] ])
}

投影节点接受二维数组,因为我们可以进行多时隙转换,即多于一个ng内容.

以下是如何将可投影节点与ViewContainerRef#createComponent一起使用的完整示例.此示例动态创建一个包含transclsion / ng-content的组件：

import { Component,ViewContainerRef,ComponentFactoryResolver } from '@angular/core';
import { ComponentFactory,ComponentRef,Renderer } from '@angular/core';

@Component({
    selector: 'sample',template: '<ng-content></ng-content><ng-content></ng-content>'
})
export class Sample { }

@Component({
    selector: 'demo',template: '<p>Demo</p>',entryComponents: [Sample]
})
export class DemoComponent {

    constructor(private vcr: ViewContainerRef,private cfr: ComponentFactoryResolver,private r: Renderer) { }

    ngAfterViewInit() {
        let cmpFactory = this.cfr.resolveComponentFactory(Sample);
        let injector = this.vcr.parentInjector;
        let demoCompEl = this.vcr.element.nativeElement;

        let projectedElA = this.r.createElement(demoCompEl,'p');
        this.r.createText(projectedElA,'projectable content A');
        this.r.detachView([projectedElA]);

        let projectedElB = this.r.createElement(demoCompEl,'p');
        this.r.createText(projectedElB,'projectable content B');
        this.r.detachView([projectedElB]);

        let projectedC = document.createElement('div');
        let text = document.createTextNode('projectable content C');
        projectedC.appendChild(text);

        let cmpRef = this.vcr.createComponent(cmpFactory,[[projectedElA],[projectedElB,projectedC]]);

    }


}

输出：

Demo

projectable content A

projectable content B

projectable content C

另外需要注意的是,在我们为可投影节点传递的2d数组中,每个1d数组条目具有属于一起的特定视图的根元素/将在单个ng内容块中一起渲染