在ngIf中動態添加組件

Question

我有一些代碼可以動態地將組件添加/刪除到我的某個頁面。這似乎工作正常，我基於Rob Wormald的真棒Ng2 Advanced Talk的方法。

做在標準的方式事情是這樣的：

@Component({ 
    template: ` 
    <parent-component> 
     <template #dyn_target></template> 
    </parent-component> 
    ` 
}) 
export class MyComp { 
    @ViewChild('dyn_target', {read: ViewContainerRef}) myTarget; 

    constructor(protected cfr: ComponentFactoryResolver) {} 

    ngOnInit(): void { 
     const factory = this.cfr.resolveComponentFactory(DynComp); 
     const compRef = this.myTarget.createComponent(factory); 
    } 
} 

一切都是快樂而工作。但現在我的問題是，如果組件的目標位置是一個本身位於* ngIf內部的元素，我該如何做這樣的事情？我有知道* ngIf應該顯示新元素的代碼，但是我不知道如何在* ngIf內查找目標的ViewContainerRef。

@Component({ 
    template: ` 
    <parent-component> 
     <other-comp></other-comp> 
     <div *ngIf="showMe" 
      <nested-comp> 
       <template #dyn_target></template> 
      </nested-comp> 
     </div> 

    </parent-component> 
    ` 
}) 
export class MyComp { 
    @ViewChild('dyn_target', {read: ViewContainerRef}) myTarget; 
    showMe: boolean = false; 

    constructor(protected cfr: ComponentFactoryResolver) {} 

    addDynComponent(): void { 
     // Q: how do I do this?   vv 
     const target: ViewContainerRef = lookup('dyn_target'); 
     const factory = this.cfr.resolveComponentFactory(DynComp); 
     const compRef = target.createComponent(factory); 
    } 
} 

我想過嘗試刪除ngIf，使整個街區充滿活力，但並沒有真正對我的情況下工作，因爲大部分的內容是靜態的，只有一個子組件需要添加何時/如果ngIf爲真。

任何人都知道如何在ngIf將其他元素添加到DOM之後隨時查找ViewContainerRef？

注意：另一種我認爲這樣做的方式是添加一個新的組件類型，該組件類型僅基於組件類類型的輸入顯示嵌套組件。我已經看到了爲Ionic 2完成的這種類型的事情，它可能適用於我的情況，但似乎是矯枉過正。因此，像：

@Component({ 
    template: ` 
    <parent-component> 
     <other-comp></other-comp> 
     <div *ngIf="showMe" 
      <nested-comp> 
       <show-comp [compClass]="dynClass"></show-comp> 
      </nested-comp> 
     </div> 

    </parent-component> 
    ` 
}) 
export class MyComp { 
    dynClass: any; 
    showMe: boolean = false; 

    addDynComponent(): void { 
     dynClass = DynComp; 
    } 
} 

Answer 1

我認爲這應該工作

@ViewChildren('dyn_target', {read: ViewContainerRef}) myTarget:QueryList<ViewContainerRef>; 

ngAfterViewInit() { 
    this.myTarget.changes.subscribe(changes => { 
    if(this.myTarget.toArray().length) { 
     // myTarget ViewContainerRef available 
    } 
    }); 
}