Angular의 :host, :host-context, ::ng-deep 선택기

이 글은 angular의 여러 특수 선택자(host, :host-context, ::ng-deep)에 대한 심층적인 이해를 제공할 것입니다. 모든 사람에게 도움이 되기를 바랍니다.

1. :host: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>

二、 ::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;
}

三、 :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는 현재 구성 요소를 선택하는 것을 의미합니다. [관련 튜토리얼 권장 사항: "

angular tutorial"]

1.1 호스트 요소 선택

:host 의사 클래스 선택기를 사용하여 컴포넌트 선택 > 하위 요소가 없는 호스트 요소의 요소(구성 요소 템플릿 내부 요소 기준)는 전체 호스트 요소를 선택하는 것과 같습니다. 🎜🎜다음 html이 있는 경우:🎜

:host-context h1{
    color: hotpink;
}

🎜 app-detail 구성 요소의 스타일(전체 app-detail의 스타일)은 다음과 같습니다. 🎜

h1{
    color: hotpink;

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

🎜Browser Elements app-detail 요소를 선택하면 스타일은 다음과 같습니다. 🎜rrreee🎜:host가 직접 작동하는 것을 볼 수 있습니다. 호스트 요소 자체🎜 🎜🎜🎜1.2 호스트 요소의 하위 요소 선택🎜🎜🎜🎜:host 뒤에 선택기를 추가하여 하위 요소. 예: <code>:host h1 구성 요소 보기에 h1 태그를 배치합니다🎜rrreee🎜🎜🎜1.3 조건부로 호스트 요소를 선택합니다🎜🎜🎜🎜호스트를 대상으로 설정합니다. with 활성 클래스가 🎜rrreee🎜인 경우에만 적용됩니다. 다음과 같이 🎜rrreee🎜🎜2 ::ng-deep🎜

🎜::ng-deep 할 수 있습니다. className의 중간 중첩 계층 관계를 무시합니다. 수정하려는 className을 직접 찾으십시오. 🎜

🎜일부 타사 구성 요소를 사용하는 경우 구성 요소의 스타일을 수정해야 합니다.🎜🎜🎜🎜2.1 호스트 요소부터 현재 요소, 모든 하위 h3 요소까지. 현재 구성 요소는 타사 구성 요소의 h3 요소를 사용합니다🎜🎜🎜rrreee🎜🎜🎜2.2 특정 유형에서 특정 유형을 검색합니다🎜🎜🎜rrreee🎜🎜3 :host-context 🎜🎜스타일을 적용하기 전에 특정 조건을 충족해야 하는 경우. 현재 구성 요소의 host 요소의 ancestor 노드에서 문서의 루트 노드까지 CSS 클래스를 찾습니다. 가 발견되면 이 구성 요소의 내부 요소에 다음 스타일이 적용됩니다. 🎜🎜🎜🎜3.1 구성 요소 호스트 요소에서 요소를 선택합니다.🎜🎜🎜rrreee🎜🎜🎜3.2 호스트가 대상이고 활성 클래스가 있는 경우에만 적용됩니다. 아래 예에서 배경색 스타일은 조상 요소(호스트 요소도 허용됨)에 모든 에 대한 CSS 클래스 <code>theme-light가 있는 경우에만 적용됩니다. 이 구성요소 내의 <h2> 요소입니다. 🎜rrreee🎜🎜🎜3.3 :host-context 뒤에 선택기를 추가하여 하위 요소를 선택할 수 있습니다🎜🎜🎜🎜예: :host-context h1 구성 요소 내에서 h1위치 지정 보기 > 태그 🎜rrreee🎜🎜🎜3.4는 특정 스타일의 내부 상태를 판단하는 데 사용할 수 있습니다🎜🎜🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 Angular의 :host, :host-context, ::ng-deep 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!