Angular Encapsulation

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

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

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

code：

import { Component, OnInit, OnDestroy, ViewChild, Input, ViewEncapsulation, ElementRef, AfterViewInit, HostListener, ViewChildren, QueryList, Renderer2 } from '@angular/core';
.......
import { BsModalService } from 'ngx-bootstrap';
const highchartsWordcloud = require('highcharts');
require('highcharts/modules/wordcloud')(highchartsWordcloud);

@Component({
  templateUrl: './individual-group.component.html',
  styleUrls: ['./individual-group.component.scss'],
  encapsulation: ViewEncapsulation.None
})

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

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

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