标签:标识 github orm process long class instead 模态框 tst
这回在开发中使用了模态窗口,但是开发中想控制模态窗口的model-container和model-dailog都无法实现。
通过观察发现样式生成在header中,并且每个选择器都添加了 _ngcontent-c*属性,这个属性是为了隔离容器内的样式。
再观察发现,模态窗口并不处于根组件中,也就是说不带有 _ngcontent-c*属性。
也就是说在模态窗口中应用的组件样式需要跳出angualr组件特有的属性。引出了下面的概念:
/** * 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 }
<head>
标签中的<style>
中生成样式,所以也无法作用与其他组件,可以用于main.ts中引用的css。<head>
标签中的<style>
中引用的标签一样,作用域全局。标签:标识 github orm process long class instead 模态框 tst
原文地址:https://www.cnblogs.com/have-a-try/p/12945989.html