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

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 here的更多信息。