如何在角度应用程序中将类添加到父级？

Question

我有下一个HTML

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

如何改变孩子的父母风格(添加新课程)？

Answer 1

您可以使用一个EventEmitter @Output()属性来指示父组件css使用动态添加/删除类ngClass.

在您的子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;
}

更多关于ngClass 这里.