angular - angular2中的可投影节点是什么

Question

关于阅读 ViewContainerRef 的文档和 ComponentFactory ，例如，我们有方法

ViewContainerRef#createComponent它有 3 个参数:componentFactory、injector 和 projectableNodes。

我尝试查找 projectableNodes 的含义以及它们在博客、教程和源代码中的使用方式，但找不到太多内容。

在查找 diff for for ngComponentOutlet directive 时，我所能收集到的只是 projectableNodes 中的字符串被“投影”或渲染到创建的组件 View (可能像 ng-content 一样)。如果是这样，那就很困惑了，因为我们有 ViewContainerRef#createEmbeddedView对于相同的。

我想知道这些 projectedNodes 是什么，并举例说明它们的用法。

Answer 1

可投影节点是节点元素(即实现 node interface 的元素)，它们被“投影”或换句话说，嵌入到我们模板中的 ng-content 中组件。

例如我们可以通过以下方式创建一个节点元素:

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,0,injector,[ [ myNode ] ])
}

投影节点接受二维数组，因为我们可以进行多时隙嵌入，即不止一个 ng-content。

这是一个完整的示例，说明如何将可投影节点与 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,0,injector,[[projectedElA],[projectedElB,projectedC]]);

    }


}

输出:

Demo

projectable content A

projectable content B

projectable content C

另外要注意的是，在我们为可投影节点传递的二维数组中，每个一维数组条目都具有属于一起的特定 View 的根元素/将一起呈现在一个单个 ng-content block