ng-bootstrap 탭에 중첩 된 scss 선택기에 문제가 있습니다.

Question

각도 프로젝트가 있고 선택기를 중첩 할 때 선택하지 않는 scss 설정으로 구성 요소를 만들었습니다. ng- 부트 스트랩 탭 클래스 이름. 내 scss에 .nav-link .badge과 같은 선택기를 사용할 수없는 이유는 무엇입니까? 그러나 .card-body .badge과 같은 요소는 요소를 선택합니다.

템플릿 파일 발췌

<ngb-tab id="projectInfoTab"> 
    <ng-template ngbTabTitle> 
     Project info<span class="badge badge-pill badge-danger">4</span> 
    </ng-template> 
<ng-template ngbTabContent> 
... 

하는 SCS

.nav-link .badge { 
    margin-left: .5em; 
} 

여기 때문에 각도 캡슐화 메커니즘이다 렌더링 된 HTML

<div _ngcontent-c3 class="card-body"> 
    <a class="nav-link active" href="" role="tab" id="projectInfoTab" aria-controls="projectInfoTab-panel" aria-expanded="true" aria-disabled="false"> 
    Project info<span _ngcontent-c3="" class="error-badge badge badge-pill badge-danger">4</span> 
    </a> 
</div> 

Answer 1

입니다. 구성 요소를 만들 때 기본적으로 캡슐화는 Emulated입니다.

확인이 링크 : Inspect generated css by Angular

당신이 당신의 구성 요소 스타일의 파일에 스타일을 넣어,

.nav-link .badge { 
    margin-left: .5em; 
} 

뭔가 그것에 추가 일부 속성으로 나만의 스타일, 그래서 당신의 사용자 정의 스타일을 생성합니다 각도가 될 것이다 편집 후 다음과 같이하십시오.

.nav-link[_ngcontent-c3] .badge { 
    margin-left: .5em; 
} 

그리고 ngb-tab 구성 요소에는 아마도 해당 요소가 없습니다. 속성에는 적용되지 않습니다. 다음 코드를 @Component 장식에 추가하여 구성 요소 캡슐화를 변경할 수 있습니다. 당신이 할 수있는

@Component({ 
    selector: 'your-comp', 
    .... 
    encapsulation: ViewEncapsulation.None 
}) 

또 다른 한가지는 ngb-tab 구성 요소의 스타일 파일이 CSS를 이동하는 것입니다.