Question

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

ViewContainerRef#createComponent有3个参数：componentFactory，injector和projectableNodes。

我已经尝试查找projectableNodes的含义以及它们在博客，教程和源代码中的用法，但找不到多少。

在查找diff for for ngComponentOutlet directive时，我可以收集的是，projectableNodes中的字符串被“投影”或呈现在创建的组件视图上（如ng-content可能）。如果是这样，那就像我们ViewContainerRef#createEmbeddedView那样令人困惑。

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

Answer 1

可投影节点是节点元素（即实现node interface的元素），它们被“投影”或换句话说，被转换到我们在组件模板中的ng-content。< / p>

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

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

需要注意的另一件事是，在我们为可投影节点传递的2d数组中，每个1d数组条目都具有属于一起的特定视图的根元素/将在一起呈现单ng-content块

angular2中的可投影节点是什么

1 个答案: