在HTML中引入angular,在Angular组件中引入外部样式的方法

在angular项目中，如果使用到js封装的一些插件，需要手动引入js文件和css文件，如果在应用入口页直接使用link方式引入的话，会阻塞首屏的加载，甚至会产生冗余的样式表；下面是一种在组件内引用外部样式的方法。

首先介绍Angular的一个枚举类：enum ViewEncapsulation {

Emulated

Native

None

}

ViewEncapsulation 的值是用来指定，在封装Angular组件的时候，如何处理样式和标签之间的关系，默认值是：ViewEncapsulation.Emulated;

用法是：import { ViewEncapsulation } from "@angular/core";@Component({

templateUrl: "./login.html",

styleUrls: ['./login.css','/bootstrap/css/bootstrap.min.css'],

encapsulation: ViewEncapsulation.Emulated

})

ViewEncapsulation.Emulated

这种方式在封装组件的时候，会给组件分配一个唯一的属性，并将这个属性添加到组件内的每一个标签上，封装后的样式表的选择器中会加上属性选择器，从而形成了一个样式表的作用域，域内样式不会影响外部，但是组件会受到父级样式的影响，如图：