Angular 2動態更改ngTemplateOutlet中的模板

Question

我想動態更改ngTemplateOutlet中的模板。 當selectedTab更改時，ngTemplateOutlet將會更改。

我有兩個基本模板，名爲＃Tab1和＃Tab2。

注：我使用角版本4

標籤菜單實施例（HTML）：

<div class="tabMenu"> 
    <ul> 
     <li *ngFor="let tab of tabLinks" [class.active]="selectedTab.name === tab.name"> 
      <a (click)="selectedTab = tab">{{ tab.name }}</a> 
     </li> 
    </ul> 

    <div class="tabContent">   
     <tab [data]="selectedTab.data"> 
      <ng-container *ngTemplateOutlet="selectedTab.name;context:selectedTab"></ng-container> 
     </tab> 

     <ng-template class="tab1" #Tab1 let-test="data"> 
      <p>Template A - {{ test }}</p>   
     </ng-template> 

     <ng-template class="tab1" #Tab2 let-test="data"> 
      <p>Template B - {{ test }}</p>   
     </ng-template> 

    </div> 
</div> 

這是基本的打字稿數組：

tabLinks: Array<Object> = [ 
    { 
     name: "Tab1", 
     data: "data tab 1" 
    }, 
    { 
     name: "Tab2", 
     data: "data tab 2" 
    } 
]; 

selectedTab: Object = this.tabLinks[0]; 

Answer 1

如果您使用@ViewChild()而不是直接模板變量引用，您可以使用this['foo']訪問一個名爲foo場：

@ViewChild('Tab1') tab1:TemplateRef<any>; 
@ViewChild('Tab2') tab2:TemplateRef<any>; 

<ng-template class="tab1" #Tab1 let-test="data"> 
     <p>Template A - {{ test }}</p>   
    </ng-template> 

    <ng-template class="tab1" #Tab2 let-test="data"> 
     <p>Template B - {{ test }}</p>   
    </ng-template> 

 <ng-container *ngTemplateOutlet="this[selectedTab.name];context:selectedTab"></ng-container>