应用bootstrap4的模态窗口出现的样式问题

这回在开发中使用了模态窗口，但是开发中想控制模态窗口的model-container和model-dailog都无法实现。

通过观察发现样式生成在header中，并且每个选择器都添加了 _ngcontent-c*属性，这个属性是为了隔离容器内的样式。

再观察发现，模态窗口并不处于根组件中，也就是说不带有 _ngcontent-c*属性。

也就是说在模态窗口中应用的组件样式需要跳出angualr组件特有的属性。引出了下面的概念：

Angular 组件样式的封装（隔离） ViewEncapsulation

/**
 * Defines template and style encapsulation options available for Component's {@link Component}.
 *
 * See {@link Component#encapsulation encapsulation}.
 *
 * @usageNotes
 * ### Example
 *
 * {@example core/ts/metadata/encapsulation.ts region='longform'}
 *
 * @publicApi
 */
export declare enum ViewEncapsulation {
    /**
     * Emulate `Native` scoping of styles by adding an attribute containing surrogate id to the Host
     * Element and pre-processing the style rules provided via {@link Component#styles styles} or
     * {@link Component#styleUrls styleUrls}, and adding the new Host Element attribute to all
     * selectors.
     *
     * This is the default option.
     */
    Emulated = 0,
    /**
     * @deprecated v6.1.0 - use {ViewEncapsulation.ShadowDom} instead.
     * Use the native encapsulation mechanism of the renderer.
     *
     * For the DOM this means using the deprecated [Shadow DOM
     * v0](https://w3c.github.io/webcomponents/spec/shadow/) and
     * creating a ShadowRoot for Component's Host Element.
     */
    Native = 1,
    /**
     * Don't provide any template or style encapsulation.
     */
    None = 2,
    /**
     * Use Shadow DOM to encapsulate styles.
     *
     * For the DOM this means using modern [Shadow
     * DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
     * creating a ShadowRoot for Component's Host Element.
     */
    ShadowDom = 3
}

ViewEncapsulation.Emulated 默认值通过在标签上增加标识，来固定样式的作用域。

ViewEncapsulation.Native 不会再<head>标签中的<style>中生成样式,所以也无法作用与其他组件,可以用于main.ts中引用的css。

ViewEncapsulation.None 生成样式是没有作用域的。和普通在<head>标签中的<style>中引用的标签一样，作用域全局。

ViewEncapsulation.ShadowDom 应用ShadowDom具体待查。

以上可以看出模态窗口需要使用ViewEncapsulation.None来添加我们的样式，这里不要忘记配置模态框自己的class，预防样式覆盖冲突。