Angular 2 modifie dynamiquement le modèle dans ngTemplateOutlet

Question

Je souhaite modifier dynamiquement le modèle dans ngTemplateOutlet. Le ngTemplateOutlet change lorsque le fichier selectedTab est modifié.

J'ai deux modèles de base ci-dessous appelés # Tab1 et # Tab2.

Remarque: J'utilise la version angulaire 4.

Menu Tab Exemple (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> 

Ceci est le tableau de tapuscrit de base:

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

selectedTab: Object = this.tabLinks[0]; 

Answer 1

Si vous utilisez @ViewChild() au lieu d'un référence variable modèle, vous pouvez utiliser this['foo'] pour accéder à un champ nommé 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>