Angular的:host、:host-context、::ng-deep选择器怎么使用

发布时间:2022-05-31 11:35:04 作者:iii
来源:亿速云 阅读:140

这篇文章主要介绍“Angular的:host、:host-context、::ng-deep选择器怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular的:host、:host-context、::ng-deep选择器怎么使用”文章能帮助大家解决问题。

Angular的:host、:host-context、::ng-deep选择器怎么使用

一、 :host

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

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 h2 定位组件视图内的 h2 标签

:host h2 {
	color:red;
}

1.3 有条件的选择宿主元素

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

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

像这样:

<app-detail class="active"></app-detail>

二、 ::ng-deep

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

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

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

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

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

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

三、 :host-context

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

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

:host-context {
	color:red;
}

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

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

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

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

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

:host-context h2{
    color: hotpink;
}

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

h2{
    color: hotpink;

    :host-context(.active) &{
        color: yellow;
    }
}

关于“Angular的:host、:host-context、::ng-deep选择器怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. Electron all the Angular 2 Things
  2. Angular父组件内修改子组件的样式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

angular host-context host

上一篇:如何使用Docker部署MySQL

下一篇:Vue中的动态组件怎么实现渲染

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》