美文网首页前端编程日记
Angular 仿真模式使用时的注意事项

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

作者: class_HellowW | 来源:发表于2019-04-05 16:39 被阅读0次

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

    原因

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


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

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


    代码中生成的 svg 图像

    解决方式

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

    1. 直接将样式写在 index.html 中作为全局样式
    2. 单独写在一个样式文件中,在 angular.json 文件中引入该文件


      angular.json 文件中引入 css 文件

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


    不使用仿真模式
    1. 使用 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 组件内部样式

    相关文章

      网友评论

        本文标题:Angular 仿真模式使用时的注意事项

        本文链接:https://www.haomeiwen.com/subject/kmqkiqtx.html