angular 2 bedingt Komponenten ein- oder ausblenden

Question

Ich habe 3 Tasten und 3 Komponenten, Was ich will ist zunächst nur das erste Element sichtbar. Durch Klicken auf die Schaltflächen wird die relevante Komponente angezeigt und die nicht relevante Komponente ausgeblendet. Wie würdest du das machen?

@Component({ 
    selector: 'Parent', 
    template: ` 
     <div class="tab"> 
      <span class="btn">show child 1</span> 
      <span class="btn">show child 2</span> 
      <span class="btn">show child 3</span> 
     </div> 
     <Child1></Child1> 
     <Child2></Child2> 
     <Child3></Child3> 
    `, 
}) 
export class ParentComponent { 
} 

Answer 1

@Component({ 
    selector: 'Parent', 
    template: ` 
     <div class="tab"> 
      <span (click)="show('show1')" class="btn">show child 1</span> 
      <span (click)="show('show2')" class="btn">show child 2</span> 
      <span (click)="show('show3')" class="btn">show child 3</span> 
     </div> 

     <div *ngIf="show1"><Child1></Child1></div> 
     <div *ngIf="show2"><Child2></Child2></div> 
     <div *ngIf="show3"><Child3></Child3></div> 
    ` 
}) 


export class ParentComponent { 
    public show1 = true; 
    public show2 = false; 
    public show3 = false; 

    show(tab){ 
     this.show1 = false; 
     this.show2 = false; 
     this.show3 = false; 

     console.log(tab) 
     if(tab == 'show1') { 
      this.show1 = true 
     } 
     if(tab == 'show2') { 
      this.show2 = true 
     } 
     if(tab == 'show3') { 
      this.show3 = true 
     } 
    } 
} 

Sehr grobe Form. Optimiere den Code wie du willst. Aber hoffe, du hast die Idee.