如何在角度應用程序中向父級添加類？

Question

我旁邊HTML

// This is parent 
<div class="some-class"> 
    // This is child 
    <totalizer</totalizer> 
</div> 

我怎樣才能改變從獨生子女父母風格（添加新的類）？

Answer 1

您可以使用EventEmitter@Output()屬性，該屬性用信號通知父組件使用ngClass動態地添加/刪除css類。

在你的孩子totalizer組件，定義，

@Output() cssRefresh = new EventEmitter<boolean>(); 

//when you need to add/remove css emit an event out to the parent like this 
// (preferably in a method in this component), 

this.cssRefresh.emit(true); // or 'false' depending on add/remove 

父 html修改此

然後，

<div class="some-class" [ngClass]="{ 'dynamicClass1 dynamicClass2 dynamicClass3': addCss}"> 
    // This is child 
    <totalizer (cssRefresh)=refreshCss($event)></totalizer> 
</div> 

父組件內部添加此方法和屬性，

addCss = false; // set 'initial state' based on your needs 

refreshCss(add: boolean) { 
this.addCss = add ? true : false; 
} 

更多關於ngClasshere。