कोणीय 2 गतिशील रूप से ngTemplateOutlet

Question

में टेम्पलेट को गतिशील रूप से बदलना चाहता हूं, मैं ngTemplateOutlet में टेम्पलेट को गतिशील रूप से बदलना चाहता हूं। चयनित टैब बदलते समय ngTemplateOutlet बदल जाएगा।

मेरे पास # टैब 1 और # टैब 2 नामक दो मूल टेम्पलेट्स हैं।

नोट: मैं कोणीय संस्करण 4.

टैब मेनू उदाहरण (एचटीएमएल) का उपयोग कर रहा:

<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() का उपयोग करते हैं टेम्पलेट चर संदर्भ, आप एक क्षेत्र foo नामित तक पहुँचने के लिए this['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>