插入一個動態組件作爲DOM容器的子項angular2

在我的項目中，我想動態地將組件作爲父容器的子項插入。下面是代碼插入一個動態組件作爲DOM容器的子項angular2

import { Component, ViewContainerRef, ComponentFactoryResolver, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'parent', 
    template: ` 
    <ng-container> 
    <child1></child1> 
<button (click)="me()">me</button> 
    </ng-container> 

    ` 
}) 
export class ParentComponent { 

    componentRef:any; 

    constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) { } 

    me() { 
    const factory = this.componentFactoryResolver.resolveComponentFactory(Child2Component); 
    this.componentRef = this.viewContainerRef.createComponent(factory); 
    // this.componentRef._component.role = role; 
    this.componentRef.changeDetectorRef.detectChanges(); 
    } 
}

在上面的代碼，則存在缺省情況下包含child1部件parent組件。有一個按鈕可插入另一個組件（child2）。但是這是作爲父組件的兄弟插入的。

<parent> 
    <child1></child1> 
</parent> 
<child2></child2>

我想插入它作爲父組件的孩子。

<parent> 
    <child1></child1> 
    <child2></child2> 
</parent>

來源

2017-08-01 Sunil Garg

您可以選擇添加到您的容器

<ng-container #selector> // <-- add selector tag here 
    <child1></child1> 
    <button (click)="me()">me</button> 
</ng-container>

，那麼你可以使用它作爲一個字段，而不是ViewContainerRef

@ViewChild('selector', {read: ViewContainerRef}) selector;

this.componentRef = this.selector.createComponent(factory);

來源

2017-08-01 12:53:52 echonax

在這種情況下，我只能插入一個孩子，對嗎？如果我必須插入多個孩子呢？ –

@SunilGarg我不知道你是什麼意思，但每次你點擊'我（）'，它會追加一個新的組件。你可以很容易地用一個國旗檢查這個。 – echonax

謝謝!!這工作正常。我可以使用'@ input'和'@ output'屬性與父項進行通信嗎？ –

動態組件始終作爲ViewContainerRef的兄弟添加。如果你想要它作爲孩子，添加一個子元素，並獲得這個元素的ViewContainerRef，使動態組件成爲這個元素的同胞。

來源

2017-08-01 12:51:51

可以請你給我一個演示？ –

插入一個動態組件作爲DOM容器的子項angular2

回答

相關問題