如何在 Angular 应用程序中将 class 添加到父元素？

Question

如何在 Angular 应用程序中将 class 添加到父元素？

4

我有下面的HTML

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

如何从子元素更改父元素的样式（添加新类）？

- John Doe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- amal · Accepted Answer

您可以使用一个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;
}

关于ngClass的更多信息，请点击这里。