:: ng-deep을 사용하는 방법과 위치

저는 Angular 4를 처음 사용하므로 누구나 ::ng-deepAngular 4에서 사용하는 방법과 위치를 설명해 주 시겠습니까?

실제로 부모 구성 요소에서 자식 구성 요소의 일부 CSS 속성을 덮어 쓰고 싶습니다. 또한 IE11에서 지원됩니까?

일반적으로 /deep/ “shadow-piercing”combinator를 사용하여 스타일을 child components. 이 선택기에는 >>> 별칭이 있으며 이제 :: ng-deep이라는 별칭이 있습니다.

이후 /deep/ combinator사용되지 않습니다, 그것은 사용하는 것이 좋습니다::ng-deep

예를 들면 :

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

과 css

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

하위 구성 요소에 적용됩니다.

용법

::ng-deep을 클릭 >>>하고 /deep/특정 CSS 규칙에 대한보기 캡슐화를 비활성화합니다. 즉, 구성 요소의 HTML에없는 DOM 요소에 액세스 할 수 있습니다. 예를 들어 Angular Material (또는 이와 같은 다른 타사 라이브러리)을 사용하는 경우 생성 된 일부 요소는 구성 요소 영역 (예 : dialog ) 밖에 있으며 해당 요소에 직접 액세스하거나 일반 CSS를 사용하여 액세스 할 수 없습니다. 방법. 이러한 요소의 스타일을 변경하려면 다음 세 가지 중 하나를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

::ng-deep .mat-dialog {
  /* styles here */
}

현재 Angular 팀 은 EMULATED 뷰 캡슐화 로만 "깊은" 조작을 할 것을 권장 합니다.

천칭

"깊은" 조작이 실제로 사용되지 도 하지만 각도가 사전 처리 지원 않기 때문에, 지금 일하고 스틸 (거부 서두르지 말고 ::ng-deep, 오늘 한 번 봐 걸릴 중단 사례를 첫번째).

어쨌든,이 방법을 따르기 전에 뷰 캡슐화 접근 을 비활성화하는 방법을 살펴볼 것을 권장합니다 (이상적이지 않고 스타일이 다른 구성 요소로 유출 될 수 있음). 그러나 어떤 경우에는 더 나은 방법입니다. 뷰 캡슐화를 비활성화하기로 결정했다면 특정 클래스를 사용하여 CSS 규칙 교차를 방지하고 마지막으로 스타일 시트가 엉망이되지 않도록하는 것이 좋습니다. 구성 요소의 .ts파일 에서 바로 비활성화하는 것은 정말 쉽습니다 .

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

이 기사 에서 뷰 캡슐화에 대한 자세한 정보를 찾을 수 있습니다 .

::ng-deep부모가 캡슐화 된 CSS 클래스가되도록 요구함으로써 구성 요소의 자식으로 만 제한하는 것의 중요성을 강조합니다 .

이것이 작동 ::ng-deep하려면 부모 뒤에 를 사용하는 것이 중요합니다. 그렇지 않으면 컴포넌트가로드되는 순간 동일한 이름을 가진 모든 클래스에 적용됩니다.

구성 요소 CSS :

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

구성 요소 템플릿 :

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

결과 (각도 생성) CSS :

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

편집하다:

:host새 CSS 클래스를 만드는 대신 키워드를 사용하여 동일한 동작을 수행 할 수 있습니다 .

:host ::ng-deep .mat-checkbox-layout

각도 가이드 ( https://angular.io/guide/component-styles) 에서 :host-context바로 위에 있는 설명을 놓치지 마세요 . 면책 조항 : 나는 지금까지 그것을 놓 쳤고 그것을 더 빨리 보았 으면 좋겠다.::ng-deep

::ng-deep구성 요소를 작성하지 않았고 해당 소스에 액세스 할 수 없을 때 종종 필요하지만 :host-context그렇게 할 때 매우 유용한 옵션이 될 수 있습니다.

예를 들어 내가 <h1>디자인 한 구성 요소 내부에 검은 색 헤더가 있고 어두운 테마 배경에 표시 될 때 흰색으로 변경하는 기능을 원합니다.

소스에 대한 액세스 권한이 없다면 부모를 위해 CSS에서이 작업을 수행해야 할 수 있습니다.

.theme-dark widget-box ::ng-deep h1 { color: white; }

그러나 대신 컴포넌트 내부 에서 :host-context이를 수행 할 수 있습니다 .

 h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

이것은 컴포넌트 체인의 어느 곳에서나 찾고 .theme-dark발견되면 h1에 CSS를 적용합니다. 이것은 ::ng-deep종종 필요하지만 다소 안티 패턴 에 너무 많이 의존하는 것에 대한 좋은 대안 입니다.

이 경우는 (이것이 sass / scss가 작동하는 방식 &입니다)로 대체 h1되므로 '일반'및 테마 / 대체 CSS를 서로 바로 옆에 정의 할 수 있습니다.

올바른 수의 :. 들어 ::ng-deep두와 거기있는 :host-context유일한 사람.

업데이트 :

::ng-deep대신 /deep/사용되지 않는 것으로 보이는 것을 사용해야 합니다 .

문서 별 :

섀도 피어싱 하위 결합자는 더 이상 사용되지 않으며 주요 브라우저 및 도구에서 지원이 제거됩니다. 따라서 Angular에서 지원을 중단 할 계획입니다 (/ deep /, >>> 및 :: ng-deep 3 개 모두). 그 전까지는 도구와의 광범위한 호환성을 위해 :: ng-deep을 선호해야합니다.

여기에서 찾을 수 있습니다.

:: ng-deep을주의해서 사용하십시오. 앱 전체에서 머티리얼 디자인 도구 모음 색상을 앱 전체에서 다른 색상으로 설정하는 데 사용했는데 앱이 도구 모음 색상 단계를 서로 테스트 할 때만 확인했습니다. 이러한 스타일이 글로벌화되기 때문입니다. 이 기사를 참조하십시오 . 다른 구성 요소에 영향을주지 않는 작업 코드 솔루션입니다.

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}