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

Question

我的项目有一个 angular 组件嵌套在主 html 文件中。它是使用 angular 选择器呈现的。

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

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

我尝试了主要的 EventEmitter html，但我了解到 EventEmitter 不适用于父元素与子元素的交互。它仅适用于子元素（组件）与父元素的交互。所以我想我必须创建一个服务提供商，它将按钮的功能从 main 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 的两个按钮使用提供程序动态添加样式添加、样式删除类到组件的 exampleDiv01？

如有任何意见，我们将不胜感激！

谢谢，

Answer 1

您可以将相同的方法添加到 child 组件。那么parent组件中方法的版本只是调用child组件中的方法。

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

Parent

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

Child

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

Angular 5 how to add ngClass of component's elements from parent HTML