[解決済み] angular 2でクラスを条件付きでトグルする。

質問

app-header コンポーネントのボタンがクリックされるたびに、app-component のクラス "active" をトグルさせる必要があります。 以下は、私のapp-component.htmlです。

<div class="off-canvas">
    <app-header><app-header>
    <app-home></app-home>
    <app-footer></app-footer>
</div>

app-header.html

<div>
<!--Some code-->
<button></button>
</div>

divとボタンが2つの異なるコンポーネントにあるので、angularだけでこれを行うにはどうしたらよいでしょうか？angularに慣れていない私を助けてください!

解決方法は？

を使用することができます。 イベントエミッター .

app-header.html

<div>
<!--Some code-->
<button (click)="emitClick()"></button>
</div>

app-header.ts

@Output() _clickEvent:EventEmitter<any>=new EventEmitter();

constructor(){
}
ngOnInit(){
}
emitClick($event){
  this.clickEvent.emit()
}

app-component.html

<div class="off-canvas" [ngClass]="{'someClassName':active}">
    <app-header (_clickEvent)="toggleActive($event)"><app-header>
    <app-home></app-home>
    <app-footer></app-footer>
</div>

app-component.ts

  active:boolean=false;    
    constructor(){
    }
    ngOnInit(){
    }
   toggleActive($event){
    // Insert click event handling here
   }

app-component.ts で active 変数を宣言し、Boolean に初期化する必要があります。クリックするたびに、activeはtrueとfalseの間で切り替わります。 someClassName'という名前のクラスが ngClass 変数'active'がtrueになるたびに、'active'の値を変更します。