本文介绍了如何在角度应用程序中将类添加到父级?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有下一个HTML

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

如何更改孩子的父母风格(添加新班级)?

解决方案

您可以使用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的更多信息此处.

I have next HTML

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

How can I change parents style ( add new class ) from child?

解决方案

You can use an EventEmitter @Output() property that signals the parent component to add/remove a css class dynamically using ngClass.

In your child totalizer component, define,

@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

Then in the parent html modify this,

<div class="some-class" [ngClass]="{ 'dynamicClass1 dynamicClass2 dynamicClass3': addCss}">
     // This is child
     <totalizer (cssRefresh)=refreshCss($event)></totalizer>
</div>

Inside your parent component add this method and property,

addCss = false; // set 'initial state' based on your needs

refreshCss(add: boolean) {
 this.addCss = add ? true : false;
}

More on ngClass here.

这篇关于如何在角度应用程序中将类添加到父级?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 14:50
查看更多