ng-content是一個組件嗎？它是如何實現的？

在角度2組件中有它們自己的作用域，因此它們模板中任何數據綁定的綁定上下文都是組件本身。 NG2沒有外部綁定上下文的概念（又名$範圍在ng1中，xaml中的datacontext，aurelia/knockout中的bindingcontext等），這是壞的和奇怪的，但不是這個問題的焦點。我的問題是ng-content是如何實現的？ng-content是一個組件嗎？它是如何實現的？

說孩子組件具有以下模板：

<div><ng-content></ng-content></div>

說父組件具有下面的模板：

<child><input [(ngModel)]="name"></child>

並說雙方父母和孩子有一個「名稱」屬性...

如果我理解正確，在運行時輸入元素的綁定上下文將是父項，而不是子項，儘管父項的內容已轉置給子項這是如何實現的？我有一個使用DynamicComponentLoad動態插入內容而不是來自父級的內容的子組件，它需要綁定上下文繼續作爲父級？有人有主意嗎？有沒有人有任何線索如何ng-content使這項工作？我理解輸入綁定是如何工作的，我理解服務是如何工作的......但這些都不是我正在尋找的......在我的組件中，我將動態添加內容，但我需要此內容的綁定上下文外部元件...

感謝

來源

2016-07-30 user2073948

不，它不是一個組成部分。它是編譯器內的'ast'（抽象語法樹）節點（https://github.com/angular/angular/blob/2.0.0-rc.4/modules/%40angular/compiler/src/template_ast.ts#L197）並使用'visitNgContent'方法編譯https://github.com/angular/angular/blob/2.0.0-rc.4/modules/%40angular/compiler/src/view_compiler/view_builder.ts#L135 – yurzui

' '只需在添加''標籤的位置插入橫跨的HTML。否則沒有什麼特別的。綁定發生在添加HTML的上下文中，而不管HTML是否包含在具有「」的元素中。 –

如果你想用孩子方面，你需要利用模板是這樣的：

<child> 
    <template let-name> 
    <input [(ngModel)]="name"> 
    </template> 
</child>

在這種情況下，不要使用ng-content但箱子的像這樣的嵌入式視圖：

@Component({ 
    selector: 'child', 
    template: ` 
    <div #target></div> 
    ` 
}) 
export class Child Components { 
    name: string = 'some value'; 

    @ViewChild('target', {read: ViewContainerRef}) target; 
    @ContentChild(TemplateRef) template: TemplateRef; 

    constructor(private cdr:ChangeDetectorRef) { 

    } 

    ngAfterViewInit() { 
    let viewRef = this.target.createEmbeddedView(this.template, { 
     $implicit: this.name 
    }); 
    this.cdr.detectChanges(); 
    } 
}

在這種情況下，使用子組件的屬性而不是父組件的屬性。

快捷方式將與局部變量引用子組件，並用它來獲得其屬性值：

<child #c> 
    <input [(ngModel)]="c.name"> 
</child>

來源

2016-07-30 04:52:29

非常感謝thierry templier ...但我需要更好地提出問題... – user2073948

ng-content是一個組件嗎？它是如何實現的？

回答

相關問題