如何在angular应用程序中将class添加到parent？

Question

我有下一个HTML

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

如何从 child 更改 parents 样式（添加新的 class ）？

Answer 1

您可以使用 EventEmitter @Output() 属性向父组件发送信号 add/remove css class 动态使用 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。

如何在angular应用程序中将class添加到parent？

How add class to parent in angular application?

css

typescript

angular-components

angular