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

Question

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

现在，我有一个 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 class。

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

button-active3 和 button-inactive 是我的 SCSS 文件中按钮的 classes 样式。

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

我怎样才能完成这项工作？

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

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

提前致谢。

Answer 1

对于 child 和 parent 之间的通信，您可以使用 angular 的 EventEmitter 属性，它使用 @Output 装饰器和 parent 绑定到该事件属性并对这些事件作出反应：

Child 组件 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

Child 时间：

@Output() changeClass: EventEmitter<any> = new EventEmitter<any>(); //import output from @angular/core

someFunction() {
  this.changeClass.emit();
}

Parent html:

<componentName (changeClass)="anotherFn($event)"></componentName>

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

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

Angular 5 How to affect ngClass in main HTML from a component?

ionic-framework

angular2-directives

ionic3

angular

angular5