是否可以在 class 位于 Angular 6 的组件内部的应用程序组件上使用 [ngClass]？

Question

我有一个 angular 6 应用程序，我正在尝试将另一个 CSS class 应用到 app.component.html 文件中我的一个应用程序组件。基本上，我想根据条件更改我的应用程序页脚的颜色，而所有其他情况都不显示页脚。所以，我的代码如下所示：

app.component.html

<router-outlet></router-outlet>
<my-footer [ngClass]="{ 'my-class' : true }"></my-footer>

我的-footer.css

:host {
    background-color: black;
    color: white;
}

.my-class {
    background-color: red;
}

是否有可能以这种方式使用 [ngClass]，其中 class 存在于我将条件应用于自身的组件中？我发现如果我将 .my-class 放在 app.component.css 文件中，那么它会按预期工作。但是，我想将我的样式放在它们所属的组件中。

谢谢！

Answer 1

将您的组件样式保留在组件内部。您想将方法更改为：

<my-footer *ngIf="ifMyCondition === true"></my-footer>

在这种情况下，它只会在您的条件为真时构建页脚。

更新--
正如您在评论中提到的，我仍然建议您在组件内部处理组件需求，而不是依赖外包（在您的情况下是 parent？）来更改组件属性。所以我建议你在你的 child 中使用 Input() 来从你的 parent 中获取你的状况状态，然后按照你想要的方式处理它。

Parent:

someCondition: boolean;

HTML :

<my-footer [condition]="someCondition"></my-footer>

Child:

@Input() condition: boolean;

现在，每次 parent 中的条件发生变化时，与 child 的绑定将不断更新他，因此您可以根据条件管理 child 组件中的任何需要在 parent.

中绑定

Answer 2

使用选择器 :host.my-class 似乎有效，如 this stackblitz 所示。

我的-footer.css

:host {
    background-color: black;
    color: white;
}

:host.my-class {
    background-color: red;
}

app.component.html

<my-footer [ngClass]="{ 'my-class' : condition }"></my-footer>

Answer 3

您可以根据条件应用您的class。

你可以这样做：

app.component.html

<router-outlet></router-outlet>
<my-footer [ngClass]="{ 'my-class' : displayFooterBg() }"></my-footer>

app.component.ts

displayFooterBg = () => {
  if (this.condition === true) {
    return true;
  } else {
    return false;
  }
}

Answer 4

您可以将 class 作为 child 组件的输入。

Parent (HTML):

<my-footer [classValue]="class1"></my-footer>

Child (TS):

@Input() public classValue = 'default-class';

Child (HTML)

<div ngClass = {{classValue }}></div>

Is it possible to use [ngClass] on an app component where the class is inside the component for Angular 6?