Angular 2 Dart : 내부 컴포넌트의 바디 클래스를 추가하는 방법은 무엇입니까?

내 Angular 2 Dart 응용 프로그램에는 여러 중첩 구성 요소가 있습니다. 내 구성 요소 중 하나의 특정 속성이 true로 설정된 경우 팝업이 표시됩니다.Angular 2 Dart : 내부 컴포넌트의 바디 클래스를 추가하는 방법은 무엇입니까?

이 팝업이 표시되면 클래스를 문서 본문에 추가하려고합니다.

의사 코드 예제 :

<html> 
<head> 
</head> 
<body class=""> 
<app-component> 
<home-component> <!-- with routers --> 
<inner-component> 
<popup-component> 
// if I am active I want to add a body class 
</popup-component> 
</inner-component> 
</home-component> 
</app-component> 
</body> 
</html>

간단한 이유 : 팝업 구성 요소가 표시되면 내가 몸 스크롤 (overflow-x:hidden;)를 비활성화합니다. 속성 bool show_popup이 popup_component.dart 내에있는 경우 팝업 구성 요소가 표시됩니다. 불행히도 CSS에서

는 - 내가 아는 한 - 그렇지 않으면 나는 main.css가 파일 또는 비슷한 뭔가

같은

body:has(.my_popup)

을 말할 것 - 어떤 선택이가 (Is there a CSS parent selector?)을 확인 아니된다.

원하는 결과를 얻으려면 어떻게해야합니까?

출처

2017-03-28 Blackbam

두 가지 방법이 있습니다. 이

selector: 'body'

또는

이있는 경우

당신은 루트 요소에

@HostBinding('class.someclass') bool isSomeClass = true;

을 사용할 수 있습니다

document.querySelector('body').classes.add('someClass');

당신은 구성 요소가 일치하는 선택에 따라 스타일을 :host-context(...)을 사용할 수 있습니다 학부모

:host-context(body.someClass) { 
    background-color: red; 
}

은 body 요소가 class="someClass" 일 때 배경색을 빨간색으로 만듭니다.

출처

2017-03-28 16:08:33

Angular 2 Dart : 내부 컴포넌트의 바디 클래스를 추가하는 방법은 무엇입니까?

답변

관련 문제