다음 대신 사용할 항목::ng-deep

다음 대신 사용할 항목::ng-deep

라우터 출구에 배치된 요소를 각도로 스타일을 지정하고 생성된 요소의 폭이 100%인지 확인하려고 합니다.

대부분의 답변에서, 저는 제가 사용해야 한다는 것을 알고 있습니다.::ng-deep선택기입니다. 하지만 Angular의 문서에서는 더 이상 사용되지 않습니다.에 대한 대안이 있습니까?::ng-deep?

FWIW 내 연구에서 나는 ng-deep 또는 다른 적용 가능한 대안에 대한 대체품을 찾지 못했습니다.에 이은 Angular W3C미있사 W3C양으와 같은 있다고deep그러나 W3c는 이후 권장 사항을 제거했지만 새 권장 사항으로 교체하지는 않았습니다.그럴 때까지 앵귤러 팀은 계속해서::ng-deep대안으로 사용할 수 있지만 W3C 초안의 보류 상태로 인해 권장되지 않는 상태입니다.지금 당장은 이를 뒷받침할 문서를 찾을 시간이 없지만 최근에 봤습니다.

짧게:하기: 계속 사용하기::ng-deep그리고 대체품이 만들어질 때까지 그 대안들 - 그 폐지는 실제 변화가 현실화될 때마다 사람들이 맹목적으로 보지 않도록 하기 위한 조기 통지일 뿐입니다.

업데이트 --

https://drafts.csswg.org/css-scoping-1/ 당신이 관심이 있다면 여기 제안 초안이 있습니다.그들은 섀도돔 트리 내의 요소에 대한 강력한 셀렉터 세트를 연구하고 있는 것으로 보입니다. 승인이 되면 각도 클론이 존재할 경우(즉, 각도가 브라우저에서 활성화되면 자체 셀렉터를 구현할 필요가 없을 수도 있음) 이 사양입니다.

딥 스타일에 대한 간단하고 쉬운 대안은 상위 구성요소의 요소 선택기를 사용하는 일반적인 스타일입니다.hero-details.css에 이것이 있다면 다음과 같습니다.

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

스타일에서는 다음과 같습니다.css:

app-hero-details h3 {
  font-style: italic;
}

기본적으로 딥 스타일은 캡슐화되지 않은 스타일이기 때문에 구성 요소 스타일보다는 일반적인 스타일로 보입니다.개인적으로 저는 더 이상 딥 스타일을 사용하지 않을 것입니다.주요 버전 업데이트에서는 변경 사항을 깨는 것이 일반적이며 사용되지 않는 기능 제거는 공정한 게임입니다.

사용되지 않는 제품을 우회하려면::ng-deep나는 보통 사용하지 않습니다.ViewEncapsulation비록 이것이 최선의 방법은 아니지만, 저에게 도움이 되었습니다.

사용 불가능으로 설정ViewEncapsulation구성 요소에서 다음을 수행합니다.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

이렇게 하면 이 구성 요소의 .scss 스타일이 전체 응용 프로그램에 전역으로 적용됩니다.스타일이 체인에서 상위 및 형제 구성요소로 이동하지 않도록 하려면 다음과 같이 선택기로 전체 scss를 감쌉니다.

app-header {
  // your styles here and any child component styles can go here
}

이제 여기에 지정된 스타일은 하위 구성 요소로 내려가므로 CSS를 추가할 때 CSS 선택기에 특별히 구체적이어야 하며 P와 Q에 주의해야 합니다(Angular 앱에서 지정된 하위 선택기와 해당 스타일을 추가할 수 있습니다).

위의 단락 때문에 최선의 접근법은 아니라고 말씀드리지만, 이것은 저에게 도움이 되었습니다.

피할 수 ::ng-deep이따금

몇 가지 대안을 살펴보겠습니다.

1. View Encapsulation을 사용합니다.없음.

@Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.scss'],
      encapsulation: ViewEncapsulation.None
    })

구성요소의 캡슐화를 해제하면 스타일을 전체적으로 사용할 수 있습니다.저는 충돌과 CSS 이상함을 피하기 위해 두 가지 방법으로 생각할 수 있습니다.

• 구성 요소의 템플릿을 클래스로 묶습니다.따라서 example.component.html은 다음과 같아야 합니다.

<section class="app-example-container">
<!-- a third party component -->
<mat-tab-group>
<mat-tab label="First"></mat-tab>
<mat-tab label="Second"></mat-tab>
</mat-tab-group>
</section>

이제 Encapsulation이 없으므로 클래스를 대상으로 하여 타사 구성 요소를 수정할 수 있습니다.즉, example.component.scss는 다음과 같아야 합니다.

.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

• 또는 구성 요소의 태그 이름을 래퍼로 사용합니다.예:

app-example {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

2. 전역 스타일 사용

당신의 .angular.json가 더 것이라는 해야 합니다.이 문제는 결국 유지하기가 점점 더 어려워질 것입니다.는 이 입니다 :) 인적으로개, 저는이피나최수후의로것사입 :)

3. 지시문 사용

지침에 스타일을 포함할 수 없기 때문에 다소 고통스럽다는 것에 동의합니다(구성요소에서 할 수 있는 것과 동일한 방법으로). 하지만 때때로 유용할 수 있습니다.또한 구성요소를 사용하여 Angular Material 팀이 버튼을 사용한 것과 동일한 방식으로 스타일을 적용할 수 있습니다.

4. :host ::ng-deep

호스트 선택기와 함께 사용하는 것이 잠재적인 스타일 충돌을 방지하는 Angular 권장 방법이라는 점을 이미 알고 계실 것입니다.

미래를 위한 셀프 노트: https://angular.io/guide/component-styles
여기서 공식적인 대안/실행 방법을 가장 먼저 확인할 수 있습니다.

5. 라이브러리 작성자가 가능한 경우 상위 구성 요소 또는 섀도 부분에서 사용자 지정할 수 있는 CSS 변수를 사용하도록 권장합니다.이오니아 팀은 이것들을 아주 잘 해냈습니다.자세한 설명은 여기에서 확인할 수 있습니다.

편집 1. 댓글에서 언급한 @beppe9000처럼 ::ng-deep는 Angular thing입니다.Angular 팀이 내일 이 기능을 제거하더라도 이미 배포된 앱은 계속 작동합니다.오래된 것들 때문에 혼란이 일어났습니다./deep/수식어

이는 ::ng-deep에 대한 일반적인 대체가 아니라 질문 작성자가 설명한 사용 사례에 대한 것입니다.

라우터 콘센트에 의해 삽입된 요소를 스타일화하려는 특별한 경우, CSS에서 인접 이웃 선택기를 사용하는 우아한 솔루션이 있습니다.

router-outlet+* {
  /* styling here... */
}

이것은 라우터 콘센트의 직접 인접 요소인 모든 요소에 적용됩니다.

자세한 내용:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

사이트 전체에서 여러 곳에서 사용되는 일부 타사 구성 요소를 스타일화하고 싶지만 이 페이지를 방문한 후 다른 상황에 영향을 주지 않고 특정 CSS 모양이 한 곳에서 필요하다면 - 사용할 수 있습니다.[ngStyle]하지만, 입니다.ViewEncapsulation.None그래서 나는 별도의 CSS 파일에서 스타일을 분리할 수 없습니다.)

/deep/를 사용할 수 있습니다.::ng-deep 대안입니다.

:host /deep/ h3 {
  font-style: italic;
}

언급URL : https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep