角4（クリック）は、別のコンポーネントの要素のクラスを変更します。

Question

1つのルートコンポーネントがあります。私は(click)="changeColors())"とボタンがありで

"PressComponent"：1つのルート要素は、3子成分を有しています。

"CalcComponent"私には青い背景のボックスがあります。

"PianoComponent"赤い背景のボックスがあります。

私が行うことができますどのようにこの：

とき、私はその後、"PressComponent" のボタンををクリックし：

を"CalcComponent"ボックスでクラスを取得します.calc-ボックス - グリーン。 で

"PianoComponent"ボックスは、クラス.pianoボックス黄色を取得します。

Plunker：https://plnkr.co/edit/d0Ll0HzU2UYq1xyi2V9L?p=preview

Answer 1

あなたは説明hereのような出力/入力を使用することができます。しかし、アブドゥル・ラファイのコメントにおけるサービスアプローチは、お客様のニーズに最も適しています。それはあなた次第です。それはボタンがAppComponentに押されたという事実を発することができるように、ソリューションhere

の出力/入力提案の

フォークトplunker私は、PressComponentに@outputを追加しました。

// in PressComponent 
@Output() pressed: EventEmitter<boolean> = new EventEmitter(); 
changeColors() { 
    this.pressed.emit(true); 
} 

// in App Template 
<app-press (pressed)=onPressed($event)></app-press> 
// in AppComponent 
onPressed = (pressed) => { 
    this.pressed = pressed; 
} 

その後AppComponentが@Input経由CalcComponentとPianoComponentに押されたステータスを転送し、conditionnalyこの例のCSSクラス

// in pianoComponent 
@Input() pressed: boolean; 
// in template 
<div class="piano-box" [class.piano-box-yellow]="pressed"></div>