Angular 5 如何从组件影响主HTML中的ngClass

Question

我正在尝试通过单击其他组件中的其他按钮来更改按钮的样式。

现在，我有一个主 html 页面，并且使用角度选择器在页面上加载了一个角度组件<component1></component1>

以下是包含该组件的主 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 样式更改为按钮活动3 类。

<button id="componentbutton" tappable (click)="Btn1='button-active3'; 
  Btn2='button-inactive';">Change Color!</button>

按钮活动

3和按钮非活动是我的SCSS文件中按钮的样式类。

我发现此配置不会触发组件的按钮来更改主 html 文件中按钮的样式。

我怎样才能做到这一点？

如果我将该组件的按钮放在主HTML文件中，它将正常工作..但我认为它不起作用，因为现在按钮位于组件中，并且组件无法访问主HTML文件的ngClass。

请帮忙。如果有办法解决它，请告诉我。

提前谢谢。

Answer 1

对于子级和父级之间的通信，您可以使用 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

子 ts：

@Output() changeClass: EventEmitter<any> = new EventEmitter<any>(); //import output from @angular/core
someFunction() {
  this.changeClass.emit();
}

父网页：

<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>