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比較詳細的，你們能夠作參考