码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-24 11:58:34      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:标识   github   orm   process   long   class   instead   模态框   tst   

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

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

标签:标识   github   orm   process   long   class   instead   模态框   tst   

原文地址:https://www.cnblogs.com/have-a-try/p/12945989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!