Angular特殊的选择器:host，:host-context，::ng-deep

angular文档

:host 表示选择当前的组件。
::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。
:host-context 如果需要满足某条件才能应用样式。它在当前组件宿主元素的祖先节点中查找 CSS 类，直到文档的根节点为止。如果找到，才会应该后面的样式到内部元素。

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

//选择组件宿主元素中的元素
:host {display: block;border: 1px solid black;
}
//把宿主作为目标，同时带有active的class类的时候才会生效
:host(.active){border-width: 3px;
}
//可以在:host后面添加选择器以选择子元素。例如：:host h1定位组件视图内的h1标签
:host h1{color:red;
}

:host-context

//选择组件宿主元素中的元素
:host-context{color:red;
}
//把宿主作为目标，同时带有active的class类的时候才会生效
:host-context(.active){color:red;
}//可以在:host-context后面添加选择器以选择子元素。例如：:host-context h1定位组件视图内的h1标签
:host-context p{color: hotpink;
}//可用于某个样式内部条件判断
h1{color: hotpink;:host-context(.active) &{color: yellow;}
}

:ng-deep

任何带有 ::ng-deep 的样式都会变成全局样式。
为了把指定的样式限定在当前组件及其下级组件中，请确保在 ::ng-deep 之前带上 :host 选择器

在使用一些第三方组件的时候，要修改组件样式或者组件下面某个特定类型的样式。
第三方样式一般没法在局部修改，提供这个:ng-deep就可以修改里面的元素样式。

//从宿主元素到当前元素再到 DOM 中的所有子h3元素
:host ::ng-deep h3 {font-style: italic;
}//搜索某类型下面的特定类型：
.card-container :ng-deep .ant-tabs-content {color: red;
}//::ng-deep如果放在顶头，这种强烈不推荐，会污染全局样式。

::ng-deep .ant-tabs-content {
height: 120px;
margin-top: -16px;
}

Angular特殊的选择器:host，:host-context，::ng-deep相关推荐

Tomcat学习笔记（5）- 容器（Engine、Host、Context、Wrapper）
Engine即为全局引擎容器,它的标准实现是StandardEngine. Host在整个Servlet引擎中抽象出Host容器用于表示虚拟主机,它是根据URL地址中的主机部分抽象的,一个Servle ...
MySQL 数据库修改访问权限，不能使用ip连接mysql问题处理：Host ‘host.docker.internal‘ is not allowed to connect to this ...
使用 ip 访问 mysql 数据库报错,由于默认配置只允许使用 localhost 访问,我们修改下参数即可. An error occurred while establishing the co ...
vdbench运行报错：java.net.NoRouteToHostException: No route to host (Host unreachable)
vdbench运行报错:java.net.NoRouteToHostException: No route to host (Host unreachable) 10:19:13.945 hd2-0 ...
请求报错No route to host (Host unreachable)
请求报错No route to host (Host unreachable); nested exception is java.net.NoRouteToHostException: No rou ...
java.net.NoRouteToHostException: No route to host(Host unreachable)
我遇到这个问题是关于FTP文件上传的异常时 java.net.NoRouteToHostException: No route to host(Host unreachable)无法连接网上说是防 ...
proxy_set_header Host $host $proxy_port $http_host
proxy_set_header Host $host $proxy_port $http_host 浏览器直接访问服务,获取到的 Host 包含浏览器请求的 IP 和端口. app.run(host ...
java.net.NoRouteToHostException: No route to host (Host unreachable)
产生场景:应用服务器连接数据库服务器,连接不上,提示 java.net.NoRouteToHostException: No route to host (Host unreachable) 原 ...
angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
如何理解host,Host是什么意思
在互联网协议中,host表示能够同其他机器互相访问的本地计算机.如何理解host,一台本地机有唯一标志代码,同网络掩码一起组成IP地址,如果通过点到点协议通过ISP访问互联网,那么在连接期间将会拥有唯 ...

Angular特殊的选择器:host，:host-context，::ng-deep

Angular特殊的选择器:host，:host-context，::ng-deep相关推荐

最新文章

热门文章