Angular 5如何从父HTML添加组件元素的ngClass

Question

我的项目有一个嵌套在主html文件中的角度组件。它使用角度选择器渲染。

和component1有divs我正在尝试使用ngClass动态添加和删除他们的CSS类。

但是触发该更改的按钮嵌套在主HTML中，而不是嵌入在组件内部。

我从主html尝试了EventEmitter，但我了解到EventEmitter不能用于父子元素交互。它仅适用于子元素（组件）与父交互。所以我想我必须创建一个服务提供程序，它将按钮的功能从主html转移到组件div。但我不知道怎么做..

这是我的主要html：

<component1></component>

<button (click)="addStyles()"></button>
<button (click)="removeStyles()"></button>

这是我的组件HTML文件：

<div [ngClass]="exampleDiv01"></div>
<div [ngClass]="exampleDiv02"></div>

这是我的组件SCSS文件：

style-added {
 background: red;
width: 400px;
height: 400px;
 }

style-removed {
 background: white;
width: 200px;
height: 200px;
}

如何使我的主HTML两个按钮动态地将样式添加，样式删除的类添加到组件示例Div01使用提供程序？

任何意见将不胜感激！

谢谢，

Answer 1

您可以将相同的方法添加到子组件。然后，父组件中的方法版本只调用子组件中的方法。

您可以使用ViewChild调用子组件中的任何方法。您可以向ViewChild传递子组件的类型。

亲

@ViewChild(ChildComponent) childComponent: ChildComponent;

addStyles(): void {
   this.childComponent.addStyles();
}

儿童

addStyle(): void {
   // Whatever code you needed to do here
}