홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

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

저자：Eve Cole 업데이트 시간：2022-06-02 14:07:02

이 기사는 Angular의 몇 가지 특수 선택자(host, :host-context, ::ng-deep)에 대한 심층적인 이해를 제공할 것입니다. 도움이 되기를 바랍니다.

1. :host

:host는 현재 구성요소를 선택한다는 의미입니다. [관련 추천 튜토리얼: "Angular 튜토리얼"]

1.1 호스트 요소 선택

:host 의사 클래스 선택기를 사용하여 구성요소宿主元素(구성요소 템플릿 내부의 요소에 상대적)에서 요소를 선택합니다. 하위 요소가 없는 경우 전체宿主元素선택하는 것과 같습니다.

다음 HTML이 있는 경우:

 <앱 세부정보></app-세부정보>

app-detail 컴포넌트의 스타일(전체 app-detail 스타일)은 다음과 같습니다.

 :주인 {
디스플레이: 인라인 블록;
배경: 빨간색;
}

브라우저 Elements app-detail 요소를 선택하고 스타일은 다음과 같습니다.

 [_nghost-wtd-c445] {
디스플레이: 인라인 블록;
배경색: 빨간색;
}

:host宿主元素本身에 직접적으로 작용하는 것을 볼 수 있습니다.

1.2 호스트 요소의 하위 요소 선택

:host 뒤에 선택기를 추가하여子元素선택할 수 있습니다. 예: :host h1 구성요소 보기 내에서 h1 태그를 찾습니다.

 :호스트 h1 {
	색상: 빨간색;
}

1.3 호스트 요소의 조건부 선택

호스트가 대상으로 사용되고 활성 클래스가 있는 경우에만 적용됩니다.

 :호스트(.active){
	테두리 너비: 3px;
}

이와 같이:

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

2. ::ng-deep

::ng-deep은 중간 클래스 이름의 중첩된 계층 관계를 무시할 수 있습니다. 수정하려는 className을 직접 찾으십시오.

일부 타사 구성 요소를 사용하는 경우 구성 요소의 스타일을 수정해야 합니다.

2.1 호스트 요소에서 현재 요소까지, 그리고 현재 구성 요소에서 타사 구성 요소를 사용하는 h3 요소를 포함하여 DOM의 모든 하위 h3 요소까지

 :호스트:ng-deep h3 {
글꼴 스타일: 기울임체;
}

2.2 특정 유형에서 특정 유형을 검색

 .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
높이: 120px;
여백 상단: -16px;
}

3. :host-context

스타일을 적용하기 전에 특정 조건을 충족해야 하는 경우. 현재 구성宿主元素의祖先노드에서 문서의 루트 노드까지 CSS 클래스를 찾습니다. 발견如果本组件내부 요소에 다음 스타일이 적용됩니다.

3.1 컴포넌트 호스트 요소에서 요소 선택

 :호스트 컨텍스트 {
	색상: 빨간색;
}

3.2 호스트가 대상으로 사용되고 활성 클래스가 있는 경우에만 적용됩니다.

다음 예에서는祖先元素(호스트 요소도 사용할 수 있음)에 CSS 클래스 theme-light 가 있는 경우에만本组件内部모든 <h2> 요소에 background-color 스타일이 적용됩니다.

 :호스트-컨텍스트(.theme-light) h2 {
배경색: #eef;
}

3.3 :host-context 뒤에 선택기를 추가하여 하위 요소를 선택할 수 있습니다.

예: :host-context h1 구성 요소 보기 내에서 h1 태그를 찾습니다.

 :호스트 컨텍스트 h1{
색상: 핫핑크;
}

3.4 특정 스타일의 내부 상태를 판단하는 데 사용할 수 있습니다.

 h1{
색상: 핫핑크;

:호스트-컨텍스트(.active) &{
색상: 노란색;
}
}

관련 기사