Angular 5如何从组件影响主HTML中的ngClass？
Angular 5如何从组件影响主HTML中的ngClass？
提问于 2018-01-12 08:43:40
我正在尝试通过单击不同组件中的其他按钮来更改按钮的样式。
现在，我有一个主html页面，页面上有一个使用angular选择器<component1></component1>加载的angular组件
下面是包含该组件的主html文件：
<button id="button01"
tappable>
<ion-icon name="square" [ngClass]="Btn1"></ion-icon>
</button>
<button id="button02"
tappable>
<ion-icon name="square" [ngClass]="Btn2"></ion-icon>
</button>这是我的组件HTML文件。它有一个按钮试图将Btn1和Btn2样式更改为button-active3 3类。
<button id="componentbutton" tappable (click)="Btn1='button-active3';
Btn2='button-inactive';">Change Color!</button>button-active3和button-inactive是我的SCSS文件中按钮的样式类。
我发现这个配置不会触发组件的按钮改变主html文件中按钮的样式。
我怎么才能让它工作呢？
如果我将组件按钮放在主HTML文件中，它将工作得很好。但我认为它不起作用，因为现在按钮在一个组件中，该组件无法访问主HTML文件的ngClass。
请帮帮忙。如果有办法解决这个问题，请告诉我。
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-12 14:53:14
对子对象和父对象之间的通信，您可以使用angular的EventEmitter属性，该属性使用@Output修饰器在某个操作上触发事件，父对象绑定到该事件属性并对这些事件做出反应：
子组件html：
<button id="componentbutton" tappable (click)="someFunction()">Change Color!</button> // you can pass paramters inside the function if you want to trigger an event by passing some values to parent子T：
@Output() changeClass: EventEmitter<any> = new EventEmitter<any>(); //import output from @angular/core
someFunction() {
this.changeClass.emit();
}父html：
<componentName (changeClass)="anotherFn($event)"></componentName>父ts：
anotherFn(){
this.Btn1 ='button-active3';
this.Btn2 ='button-inactive';
}然后，您可以轻松地将Btn1和Btn2绑定到您想要的任何位置，并应用这些类
<ion-icon name="square" [ngClass]="Btn1"></ion-icon>
<ion-icon name="square" [ngClass]="Btn2"></ion-icon>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48217993
复制相关文章
相似问题
腾讯云开发者
