角2は条件付きでコンポーネントを表示または非表示にします

Question

3つのボタンと3つのコンポーネントがあります。最初は何も表示されません。ボタンをクリックすると、関連するコンポーネントが表示され、関係のないコンポーネントは非表示になります。あなたはどうしますか？

@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 
     } 
    } 
} 

非常粗製形態。必要に応じてコードを最適化します。 しかし、あなたはアイデアを得たと思う。