:host :host-context ::ng-deep详解

:host 与 ::ng-deep

:host 表示选择当前的组件。

::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。

在使用一些第三方的组件的时候,要修改组件的样式。
这种情况下使用:

:host ::ng-deep .className{新的样式......
}
:host {background: #F1F1F1;overflow: hidden;padding: 24px;display: block;
}.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {height: 120px;margin-top: -16px;
}

不过官方文档上说,ng-deep 在未来的版本中将被放弃,不知道未来会变成什么样的语法。使用的时候,记得为未来Angular升级带来的变化做准备。

:host-context

::ng-deep当你没有编写组件并且无法访问其源代码时,通常需要这样做,但是:host-context当你这样做时,它可能是一个非常有用的选项.

例如,我<h1>在我设计的组件中有一个黑色标题,我希望能够在黑暗的主题背景上显示时将其更改为白色.

如果我无法访问源代码,我可能必须在父代的css中执行此操作:

.theme-dark widget-box ::ng-deep h1 { color: white; }

但相反,:host-context您可以在组件执行此操作.SCSS代码

 h1 {color: black;       // default color:host-context(.theme-dark) &{color: white;   // color for dark-theme}// OR set an attribute 'outside' with [attr.theme]="'dark'":host-context([theme='dark']) &{color: white;   // color for dark-theme}}

这将查看组件链中的任何位置,.theme-dark如果找到,则将css应用于h1.这是一个很好的选择,过分依赖::ng-deep,而往往是必要的反模式.

在这种情况下,它&被替换为h1(这就是sass/scss的工作方式),因此您可以将"正常"和主题/替代css紧挨着定义,这非常方便.

官网资料

特殊的选择器

组件样式中有一些从影子(Shadow) DOM 样式范围领域(记录在W3C的CSS Scoping Module Level 1中) 引入的特殊选择器

:host

使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素)。

src/app/hero-details.component.css

:host {display: block;border: 1px solid black;
}

:host 选择是是把宿主元素作为目标的唯一方式。除此之外,你将没办法指定它, 因为宿主不是组件自身模板的一部分,而是父组件模板的一部分。

要把宿主样式作为条件,就要像函数一样把其它选择器放在 :host 后面的括号中。

下一个例子再次把宿主元素作为目标,但是只有当它同时带有 active CSS 类的时候才会生效。

src/app/hero-details.component.css

:host(.active) {border-width: 3px;
}

:host-context

有时候,基于某些来自组件视图外部的条件应用样式是很有用的。 例如,在文档的 <body> 元素上可能有一个用于表示样式主题 (theme) 的 CSS 类,你应当基于它来决定组件的样式。

这时可以使用 :host-context() 伪类选择器。它也以类似 :host() 形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类, 直到文档的根节点为止。在与其它选择器组合使用时,它非常有用。

在下面的例子中,只有当某个祖先元素有 CSS 类 theme-light 时,才会把 background-color 样式应用到组件内部的所有 <h2> 元素中。

src/app/hero-details.component.css

:host-context(.theme-light) h2 {background-color: #eef;
}

已废弃 /deep/>>> 和 ::ng-deep

组件样式通常只会作用于组件自身的 HTML 上。

把伪类 ::ng-deep 应用到任何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有 ::ng-deep 的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中,请确保在 ::ng-deep 之前带上 :host 选择器。如果 ::ng-deep 组合器在 :host 伪类之外使用,该样式就会污染其它组件。

这个例子以所有的 <h3> 元素为目标,从宿主元素到当前元素再到 DOM 中的所有子元素:

src/app/hero-details.component.css

:host ::ng-deep h3 {font-style: italic;
}

/deep/ 组合器还有两个别名:>>> 和 ::ng-deep

/deep/ 和 >>> 选择器只能被用在仿真 (emulated) 模式下。 这种方式是默认值,也是用得最多的方式。 更多信息,见控制视图封装模式一节。

CSS 标准中用于 "刺穿 Shadow DOM" 的组合器已经被废弃,并将这个特性从主流浏览器和工具中移除。 因此,我们也将在 Angular 中移除对它们的支持(包括 /deep/>>> 和 ::ng-deep)。 目前,建议先统一使用 ::ng-deep,以便兼容将来的工具。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java生鲜电商平台-缓存架构实战

Java生鲜电商平台-缓存架构实战 说明&#xff1a;在Java生鲜电商中&#xff0c;缓存起到了非常重要的作用&#xff0c;目前整个项目中才用的是redis做分布式缓存. 缓存集群 缓存集群存在的问题 1.热key 缓存集群中的某个key瞬间被数万甚至十万的并发请求打爆。 2.大value 某个k…

Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构

Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构 概述 毫无疑问&#xff0c;Spring Cloud是目前微服务架构领域的翘楚&#xff0c;无数的书籍博客都在讲解这个技术。不过大多数讲解还停留在对Spring Cloud功能使用的层面&#xff0c;其底层的很多原理&#xf…

Angular自学笔记(?)DI提供者

类提供者 类提供者的创建和使用 假设有logger类: import {Injectable } from @angular/core;@Injectable() export class LoggerService {logs: string[] = [

Angular自学笔记(?)生命周期

从实例化组件,渲染组件模板时,各声明周期就已开始 ngOnChanges 输入属性发生变化是触发,但组件内部改变输入属性是不会触发的 import {Component, Input, OnInit, OnChanges } from @angular/core;@Component({selector: app-life-cycle,templateUrl:

[转载]httpClient.execute抛Connection to refused异常问题

在4.0之后android采用了严格模式&#xff1a;所以在你得activity创建的时候&#xff0c;在super.onCreate(savedInstanceState);后面加上这个 StrictMode.setThreadPolicy(new StrictMode.ThreadPolicy.Builder() .detectDiskReads() .detectDiskWrites(…

Angular自学笔记(?)依赖注入

什么是依赖注入 依赖注入(DI)是一种设计模式, 也有相应的框架,比如InversifyJS Angular 有自己的 DI 框架, DI 框架会在实例化该类时向其提供这个类所声明的依赖项 带修饰符的参数 在ts中,一个类的参数如果带上修饰符,那个参数就变成了类的实例属性 class Mobile {co…

MSN8.0经常出现连接错误,如何解决?

连接错误有很多种情形&#xff0c;请您先查看下连接错误代码 然后可以尝试以下解决办法--------- 如何解决错误 81000301 或 81000306 您登录 MSN Messenger 时&#xff0c;可能会收到以下错误消息&#xff1a; 我们无法让您登录到 MSN Messenger&#xff0c;可能是因为服务或 …

@ViewChild 的三种常用方法

//--1------ 在angular中进行dom操作 <div #dom>这是一个div</div> //放置一个锚点domimport { ElementRef, ViewChild } from angular/core;ViewChild(dom,{static:true}), eleRef:ElementRef; //static-True表示在运行更改检测之前解析查询结果&#xff0c;false…

SQL Server安装文件挂起错误解决办法

以前在安装sql的时候&#xff0c;如此提示&#xff0c;我只要重新启动即可&#xff0c;可是今天重新启动了N次计算机&#xff0c;问题却丝毫没有解决&#xff0c;依然提示这样的话。“以前的某个程序安装已在安装计算机上创建挂起的文件操作。运行安装程序之前必须重新启动计算…

angular 内容投影

app HTML <div class"wrapper"><h2>我是父组件</h2><div>这个div定义在父组件中</div><app-child><div class"header">这个div是父组件投影到子组件的1, {{title}}</div><div class"footer"…

移动端日历插件

//datePicker日期控件 v1.0//var calendar new datePicker();//calendar.init({// trigger: #demo1, /*选择器&#xff0c;触发弹出插件*/// type: date,/*date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择*/// minDate:1900-1-1,/*最小日期*/…

js 操作location URL对象进行操作

把location 创建URL对象 构造器 new URL() 创建并返回一个URL对象&#xff0c;该URL对象引用使用绝对URL字符串&#xff0c;相对URL字符串和基本URL字符串指定的URL。 属性 hash 包含#的USVString&#xff0c;后跟URL的片段标识符。 host 一个USVString&#xff0c;其中…

aspx,ascx和ashx使用小结

做asp.net开发的对.aspx,.ascx和.ashx都不会陌生。关于它们&#xff0c;网上有很多文章介绍。“纸上得来终觉浅&#xff0c;绝知此事要躬行”&#xff0c;下面自己总结一下做个笔记。 1、.aspx Web窗体设计页面。Web窗体页由两部分组成&#xff1a;视觉元素&#xff08;html、服…

vue3.x通过ref属性获取元素

在vue2.x中&#xff0c;可以通过给元素添加refxxx属性&#xff0c;然后在代码中通过this.$refs.xxx获取到对应的元素 然而在vue3中时没有$refs这个东西的&#xff0c;因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取vue3需要借助生命周期方法&#xff0c;原因很简单…

vue3+TypeScript封装echarts5组件

https://blog.csdn.net/qq_38330707/article/details/111497853 有用mark 等抽时间写个vueTSecharts5.0的组件文章 写个大概 带 resize的 <template><div class"echarts" :id"id"></div> </template><script lang"ts&q…

How to Register COM in VS

在 Visual Studio .Net 部署项目中注册 COM 模块的步骤 将 COM 对象添加到 Visual Studio 部署项目。在解决方案资源管理器中&#xff0c;右键单击刚添加的模块&#xff0c;然后单击属性。注意&#xff1a;“属性”窗口包含一个表&#xff0c;其中有两列和 x 行&#xff08;行数…

css3 卡片hover3D效果

鼠标hover卡片 向上翻转&#xff0c;看简易代码 <!DOCTYPE html> <html> <head><title>3D Flip Card hover effects</title><style type"text/css">* {margin: 0;padding: 0;font-family: consolas;box-sizing: border-box;}bo…

随便贴两个漏洞,如 Apache JServ协议服务

1、Apache JServ协议服务 描述&#xff1a;Apache JServ协议&#xff08;AJP&#xff09;是一种二进制协议&#xff0c;可以将来自Web服务器的入站请求代理到 位于Web服务器后面的应用程序服务器。不建议在互联网上公开使用AJP服务。 如果AJP配置错误&#xff0c;可能会允许攻击…

vue3学习笔记 Composition API setup

一、Composition API优势 相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Api 功能分组 Composition(组合式)Api 功能导入复用 组合式Api 所解决的问题 (1) 更好的代码组织结构 (2) 相同的代码逻辑可以进行复用 home.vue 3种方式递进升级…

【TCP传输数据-键盘录入】

package com.yjf.esupplier.common.test;import java.io.*; import java.net.Socket;/*** author shusheng* description TCP 传输数据:键盘录入* Email shushengyiji.com* date 2019/1/15 22:57*/ public class ClientDemo1 {public static void main(String[] args) throws I…