本文介绍了如何在角度应用程序中将类添加到父级?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有下一个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.
这篇关于如何在角度应用程序中将类添加到父级?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!