登录  /  注册
首页 > web前端 > js教程 > 正文

Angular的:host、:host-context、::ng-deep选择器

青灯夜游
发布: 2022-05-31 11:08:54
转载
2950人浏览过

本篇文章带大家深入了解一下angular中的几个特殊选择器:host、:host-context、::ng-deep,希望对大家有所帮助!

Angular的:host、:host-context、::ng-deep选择器

<h2>一、 :host

:host 表示选择当前的组件。【相关教程推荐:《angular教程》】

1.1 选择宿主元素

使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素),没有子元素就相当于选择整个宿主元素

如有下面html:

<app-detail></app-detail>
登录后复制

组件 app-detail 的样式(整个app-detail 的样式)如下 :

:host {
    display: inline-block;
    background: red;
}
登录后复制

浏览器 Elements 选择 app-detail 元素, Style 如下:

[_nghost-wtd-c445] {
    display: inline-block;
    background-color: red;
}
登录后复制

可以看得出来,:host 直接作用于宿主元素本身

1.2 选择宿主元素的子元素

可以在 :host 后面添加选择器以选择子元素。例如::host h1 定位组件视图内的 h1 标签

:host h1 {
	color:red;
}
登录后复制

1.3 有条件的选择宿主元素

把宿主作为目标,同时带有 active 的 class 类的时候才会生效

:host(.active){
	border-width: 3px;
}
登录后复制

像这样:

<app-detail class="active"></app-detail>
登录后复制
<h2>二、 ::ng-deep

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

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

2.1 从宿主元素到当前元素再到 DOM 中的所有子 h3 元素,包括当前组件中使用第三方组件的 h3 元素

:host ::ng-deep h3 {
  font-style: italic;
}
登录后复制

2.2 搜索某类型下面的特定类型

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}
登录后复制
<h2>三、 :host-context

如果需要满足某条件才能应用样式。它在当前组件宿主元素祖先节点中查找 CSS 类,直到文档的根节点为止。如果找到,才会应用后面的样式到本组件内部元素。

3.1 选择组件宿主元素中的元素

:host-context {
	color:red;
}
登录后复制

3.2 把宿主作为目标,同时带有active的class类的时候才会生效

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

:host-context(.theme-light) h2 {
  background-color: #eef;
}
登录后复制

3.3 可以在:host-context后面添加选择器以选择子元素

例如::host-context h1 定位组件视图内的 h1 标签

:host-context h1{
    color: hotpink;
}
登录后复制

3.4 可用于某个样式内部条件判断

h1{
    color: hotpink;

    :host-context(.active) &{
        color: yellow;
    }
}
登录后复制

更多编程相关知识,请访问:编程教学!!

以上就是Angular的:host、:host-context、::ng-deep选择器的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:csdn网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号