Angular 仿真模式使用时的注意事项

使用 angular 的仿真模式封装样式时可能会遇到在 css 文件声明的样式不生效的问题。

原因

仿真模式生成的类名会自动加上属性，以将样式封装在组件内部，避免影响其他组件。

默认使用仿真模式 css 文件中的样式
封装后的样式

而如果使用 svg 绘图或其他三方组件时，其内部不会带有该属性，样式自然不会生效。使用代码生成 svg 图象时，期望样式生效的元素上并没有 _ngcontent-c1 属性

代码中生成的 svg 图像

解决方式

此时解决方式通常有以下几种：

1. 直接将样式写在 index.html 中作为全局样式

2. 单独写在一个样式文件中，在 angular.json 文件中引入该文件

   
   angular.json 文件中引入 css 文件

3.不使用仿真模式，即不封装该组件的样式，会引入到全局环境中。生成的样式文件中的样式上不会带有 ngcontent 类似的属性选择器

不使用仿真模式

4. 使用 angular 提供的 强制样式浸入子组件的功能。:host 代表组件本身，::ng-deep 代表其后的选择器不会带有 ngcontent 属性，

:host ::ng-deep .MyRect {
  fill: steelblue;
}

输出的 css 文件如下

输出样式

如果需要运用 :host ::ng-deep 的样式较多，还可以使用 scss 样式文件，添加一个总的样式类将需要浸入的组件包裹起来，然后在该类前面使用 :host ::ng-deep

用于包裹组件的样式类
生成的 css 样式

使用场景

1. 使用 d3 绘图时，在代码里面使用类名时无法引用到 svg 内部
2. 使用其他组件，如 antd 时，想要修改 antd 组件内部样式