Angular 2 dynamicznie zmienia szablon w ngTemplateOutlet

Question

Chcę dynamicznie zmieniać szablon w ngTemplateOutlet. NgTemplateOutlet zmieni się po zmianie zaznaczonej tabeli.

Mam dwa podstawowe szablony poniżej: # Tab1 i # Tab2.

Uwaga: Używam wersji kątowej 4.

Tab Menu Przykład (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> 

To jest podstawowa tablica maszynopis:

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

selectedTab: Object = this.tabLinks[0]; 

Answer 1

Jeśli używasz @ViewChild() zamiast bezpośredniego Zmienna szablonu odniesienia, można użyć this['foo'] dostęp do pola o nazwie 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>