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

Question

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

app.component.html

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

我的页脚.css

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

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

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

谢谢！

Answer 1

使用选择器:host.my-class 似乎可以工作，如this stackblitz 所示。

我的页脚.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 2

将组件样式保留在组件内部。你想改变你的方法：

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

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

更新--
正如您在评论中提到的，我仍然建议您在组件内部处理组件需求，而不是依赖外包（在您的情况下是父级？）来更改组件属性。因此，我建议您在您的孩子中使用 Input() 从您的父母那里获取您的病情状态，然后按照您的意愿进行处理。

家长：

someCondition: boolean;

HTML：

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

孩子：

@Input() condition: boolean;

现在，每次您的父项中的条件发生变化时，与子项的绑定都会不断更新他，这样您就可以根据父项中的条件来管理子组件中所需的任何内容。

Answer 3

您可以根据条件申请您的课程。

你可以这样做：

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

您可以将类作为子组件的输入。

父级 (HTML)：

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

儿童 (TS)：

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

子 (HTML)

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