带有 FontAwesome 的 Angular：无法设置路径样式

Question

我创建了一个新项目，安装了 font-awesome：

"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-brands-svg-icons": "^5.9.0",

导入FontAwesomeModule:

imports: [
    ...,
    FontAwesomeModule
],

并创建了一个简单的图标：

faFacebook = faFacebook;

<fa-icon [icon]="faFacebook"></fa-icon>

图标已成功显示。现在我想为生成的图标设置path 的样式：

path {
  fill: red;
}

但它不起作用。我的 Chrome 甚至没有在开发者工具中打印这条规则。

如何设置path 的样式？我必须精确地设置path 的样式，而不是fa-icon（使用fill: url(#gradient) 应用渐变）。

Answer 1

Angular 默认提供样式的封装（模拟）。这意味着每个组件都是独立的，同一页面中的两个组件之间不会有任何冲突。 （例如，如果他们使用相同的类名）。

https://angular.io/guide/component-styles

来自 Angular 官方文档：

查看封装

如前所述，组件 CSS 样式被封装到组件的视图中，不会影响应用程序的其余部分。

要控制此封装如何在每个组件的基础上进行，您可以在组件元数据中设置视图封装模式。从以下模式中选择：

• ShadowDom 视图封装使用浏览器的本机影子 DOM 实现（参见 MDN 站点上的 Shadow DOM）将影子 DOM 附加到组件的宿主元素，然后将组件视图放入该影子 DOM 中。组件的样式包含在 shadow DOM 中。

• 原生视图封装使用浏览器原生 shadow DOM 实现的现已弃用的版本 - 了解这些变化。

• 模拟视图封装（默认）通过预处理（和重命名）CSS 代码来模拟影子 DOM 的行为，从而有效地将 CSS 限定在组件的视图中。详见附录一。

• None 意味着 Angular 没有视图封装。 Angular 将 CSS 添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到 HTML 中基本相同。

要为组件中包含的元素设置样式（如果此功能不是由它自己的组件库提供），那么您有 2 个选项：

1) 将您的样式添加到全局styles.css

全局styles.css中定义的样式没有任何封装。

在您的组件中：

<fa-icon class="my-global-icon" [icon]="faFacebook"></fa-icon>

在您的styles.css 或styles.scss：

fa-icon.my-global-icon path {
  fill: red;
}

2) 禁用封装仿真

默认情况下，封装在组件内定义的样式上处于活动状态（模拟）。 要禁用它，您应该设置encapsulation = ViewEncapsulation.None

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {
...

在这种情况下，您将能够为组件的直接子元素中包含的子元素设置样式。但要小心，你可能会遇到风格冲突的其他问题。现在管理它们是你的工作。

希望它会有所帮助。

Answer 2

你可以通过传递[style]属性直接改变fontawesome图标的样式，如下所示。

<fa-icon [icon]="faFacebook" [styles]="{'stroke': 'red', 'color': 'red'}">
</fa-icon>