什麼是angular2

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中。

例如，我們可以建立一個節點元件通過以下方式：

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-含量的組分：

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 

的產生額外的一點需要注意的是，二維陣列中，我們通過對可投影節點，每個1d數組條目具有特定視圖的根元素，屬於一起/將一起呈現在一塊ng-content塊中