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

Posted 2023-03-13

【中文标题】如何在角度应用程序中向父级添加类？

【英文标题】：How add class to parent in angular application?

【发布时间】：2018-02-24 17:54:50

【问题描述】：

我有下一个 html

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

如何从孩子更改父母的风格（添加新班级）？

【参考方案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。