angular-fontawesome fa-layers-counter 颜色变化答案

【问题标题】：angular-fontawesome fa-layers-counter color changeangular-fontawesome fa-layers-counter 颜色变化
【发布时间】：2020-10-18 05:44:07
【问题描述】：

我正在使用 angular-fontawesome 库作为离子应用程序的一部分。我似乎无法让 fa-layer-counter 组件改变颜色，使其远离默认的红色阴影。

<fa-layers [fixedWidth]="true">
    <fa-icon [icon]="['far', 'bell']"></fa-icon>
    <fa-layers-counter content=""></fa-layers-counter>
</fa-layers>

我试过了：

添加一个类来更改 SCSS 背景颜色，如下所示：

<fa-layers [fixedWidth]="true">
    <fa-icon [icon]="['far', 'bell']"></fa-icon>
    <fa-layers-counter content="" class="color-change"></fa-layers-counter>
</fa-layers>

.color-change {
    --background-color: var(--ion-color-success) !important;
}

点击创建的 span 子元素（带有元素和类名）：

<fa-layers [fixedWidth]="true">
    <fa-icon [icon]="['far', 'bell']"></fa-icon>
    <fa-layers-counter content="" class="color-change"></fa-layers-counter>
</fa-layers>

.color-change > .fa-layers-counter {
    --background-color: var(--ion-color-success) !important;
}

内嵌样式。
使用除背景色以外的样式。

我没有想法，无法进行任何工作。有什么想法吗？

【问题讨论】：

如果您不想使用默认颜色，为什么不使用通用的<div> 标签？
我想要标签附带的所有其他内容 - 位置、大小、内容等。

标签： angular ionic-framework font-awesome angular-fontawesome

【解决方案1】：

第一个问题是您尝试更改--background-color，即CSS variable。 angular-fontawesome 无法识别此变量。所以你应该改成background-color CSS 属性。

那么这里有两件事在起作用：CSS 级联和 Angular 视图封装。

所以直观的方法是在<fa-layers-counter> 中添加一个类。它将正确添加一个类并更改<fa-layers-counter> 元素的颜色。但问题是实际的点是<fa-layers-counter> 内的<span>，它覆盖在其父级上设置的background-color 值。

<fa-layers-counter class="color-change"> <!-- you set your colour here -->
  <span class="fa-layers-counter"></span> <!-- but it is overridden on the child element by the library -->
</fa-layers-counter>

为了解决这个问题angular-fontawesome 提供了classes input，它允许在内部<span> 元素上分配类。

所以<fa-layers-counter [classes]="['change-color']"></fa-layers-counter> 会导致以下标记：

<fa-layers-counter>
  <span class="fa-layers-counter color-change"></span>
</fa-layers-counter>

但这仍然不起作用，因为 Angular 的 view encapsulation。 color-change 类是在你的宿主组件中定义的，Angular 会阻止它的规则应用于 fa-layers-counter 的内容（这是一个不同的组件）。为了克服这个问题，你需要告诉 Angular 你真的想把它应用到另一个组件的内容上。最终解决方案如下所示：

<fa-layers-counter [classes]="['change-color']"></fa-layers-counter>

/* :host is a small precaution, to ensure that .change-color is only applied in the host's subtree. This is not required, but makes it less likely for `.change-color` class rules to leak in the unexpected place. */
:host ::ng-deep .change-color {
  background-color: green;
}

这是 StackBlitz 上的一个工作示例：https://stackblitz.com/edit/angular-z8v4ux-kof4dr

【讨论】：