这回在开发中使用了模态窗口，但是开发中想控制模态窗口的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，预防样式覆盖冲突。