왼쪽 및 오른쪽 모듈 및 그림자 DOM

Question

아랍어와 같은 "오른쪽에서 왼쪽으로"언어를 지원하는 웹 사이트가 있습니다. 언어가 아랍어 인 경우 body 태그 dir="rtl"을 붙입니다. 이 방법으로 모든 인라인 위치의 자식은 사용자 정의 구성 요소 내에 있더라도 오른쪽에서 정렬됩니다.

이제는 사용자 지정 스타일을 원하거나 해당 구성 요소 중 하나가 오른쪽에서 왼쪽으로 지시문을 상속받습니다. 그래서 달성하는 일반적인 방법은 다음과 같다 :

body[dir="rtl"] myComponent { 
// custom style if I am in right to left 
} 

문제는 선택이 부모의 속성 때문에 내 스타일이 적용되지 않습니다을받지 않습니다 그림자 DOM을 사용하는 것입니다. 따라서 Angular 2.0을 사용하는 부모 속성에서 모듈을 명시 적으로 상속하는 방법이 있는지 궁금합니다. 이러한 방법으로 당신이 ViewEncapsulation.Native을 설정하지 않는 한

Answer 1

3 개 가지 방법 :

A. 최적의 솔루션

:host-context([dir="rtl"]) myComponent{ 
// custom style if I am in right to left 
} 

B. 명시 적 구성 요소에 클래스를 넣어 :dir pseudo-class

C. 프로그래밍에 의존 (아직?) 모든 곳에서 작동하지 않음 (불량)

import {ElementRef, AfterContentInit} from '@angular/core'; 

@Component({ 
... 
}) 
export class MyComponent implements AfterContentInit { 
    @HostBinding('attr.dir') 
    public dir:string; 

    constructor(private element:ElementRef) { 

    } 

    public ngAfterContentInit():void { 
    this.dir = getComputedStyle(this.element.nativeElement).direction; 
    } 
} 

Answer 2

Angular2에는 그림자 DOM은 없습니다 ... 나는 단순히

myComponent[dir="rtl"]{ 
// my stlyles 
} 

를 작성할 수 그리고 수행하고있다. 네가 했니? Angular2의 스타일에는 문제가 없어야합니다. >>> 또는 /deep/을 사용하여 구성 요소 테두리를 교차시킬 수 있습니다.

HTML을 동적으로 추가하는 경우 (비 앵글 JS 라이브러리로) >>> 및 /deep/을 사용할 수도 있지만 상황이 어떻게 바뀌는 지 보여주는 코드가 더 필요합니다.