ボタンのクリックで子コンポーネントを読み込む方法4

Question

助けてください。親コンポーネント内のボタンをクリックすると、親コンポーネント内の子コンポーネントをロードしようとしていました。

提案が必要です。私はちょうどそれを働かせましたが、私は本当にそれを行うための適切な方法であることを知りたいです。実装は次のとおりです。

<div class="btn-group" role="group"> 
     <button type="button" id="stars" class="btn btn-primary" data-toggle="tab" (click)="clickStars()"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> 
     <div class="hidden-xs">Stars</div> 
     </button> 
    </div> 
    <div class="btn-group" role="group"> 
     <button type="button" id="favorites" class="btn btn-default" data-toggle="tab" (click)="clickFavorite()"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> 
     <div class="hidden-xs">Favorites</div> 
     </button> 
    </div> 
    <div class="btn-group" role="group"> 
     <button type="button" id="following" class="btn btn-default" data-toggle="tab" (click) = "clickFollowings()"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
     <div class="hidden-xs">Following</div> 
     </button> 
    </div> 
    </div> 
    <div class="well"> 
    <div class="tab-content"> 
     <app-stars *ngIf="!starsHidden"></app-stars> 
     <app-favorites *ngIf="!favoriteHidden"></app-favorites> 
     <app-followings *ngIf="!followingsHidden"></app-followings> 
    </div> 
    </div> 
</div> 



import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-profile', 
    templateUrl: './profile.component.html', 
    styleUrls: ['./profile.component.css'] 
}) 
export class ProfileComponent implements OnInit { 

    starsHidden:boolean; 
    favoriteHidden:boolean; 
    followingsHidden:boolean 

    constructor() { } 

    ngOnInit() { 
    this.starsHidden = false; 
    this.favoriteHidden = true; 
    this.followingsHidden = true; 
    } 

    clickStars(){ 
    this.starsHidden = false; 
    this.favoriteHidden = true; 
    this.followingsHidden = true; 
    } 

    clickFavorite(){ 
    this.starsHidden = true; 
    this.favoriteHidden = false; 
    this.followingsHidden = true; 
    } 

    clickFollowings(){ 
    this.starsHidden = true; 
    this.favoriteHidden = true; 
    this.followingsHidden = false; 
    } 

} 

Answer 1

はい、それは問題ありませんが、これらの変数と方法はすべて悪夢のようです。

activeTab: 'STARS' | 'FAVORITES' | 'FOLLOWINGS'; 

onChangeTab(tab: string){ 
    this.activeTab = tab; 
} 

をそして、あなたはこれに似たものに、あなたのテンプレートを変更したい：なぜ、例えば、文字列では動作しませ

<button (click)="onChangeTab('STARS')">Stars</button> 

これは大丈夫だろうが、それはさらに良くなるだろうそのロジックをすべて管理する独自のTabsComponentを作成すれば、簡単に再利用できます。