Angular Encapsulation - css选择器选不到非angular组件（插件）

Angular5 项目中遇到：当我在某一个组件的css文件中使用css类选择器去选择组件中的插件元素，发现选择器选择不到该插件元素。

经过google分析发现是组件中的一个属性在作祟： encapsulation. 默认情况下： angular组件对应的css只在该组件下起作用，对于不属于angular组件的元素是不起作用的（例如组件中引入的各个插件 highcharts tooltips bootstrap）。

想要解决这个问题，我们需要设定css为非包裹性的，即css选择器的范围是body内的所有元素，而非只是当前的组件。

code：

 1 import { Component, OnInit, OnDestroy, ViewChild, Input, ViewEncapsulation, ElementRef, AfterViewInit, HostListener, ViewChildren, QueryList, Renderer2 } from '@angular/core';
 2 .......
 3 import { BsModalService } from 'ngx-bootstrap';
 4 const highchartsWordcloud = require('highcharts');
 5 require('highcharts/modules/wordcloud')(highchartsWordcloud);
 6 
 7 @Component({
 8   templateUrl: './individual-group.component.html',
 9   styleUrls: ['./individual-group.component.scss'],
10   encapsulation: ViewEncapsulation.None
11 })

ViewEncapsulation是一个枚举类型，有四个值，具体可参考官方文档

If  encapsulation is not supplied, the value is taken from CompilerOptions. The default compiler option isViewEncapsulation.Emulated.

 下面这篇文章是我觉得讲解 encapsulation比较详细的，大家可以做参考

转载于:https://www.cnblogs.com/juliazhang/p/10524436.html