Angular 2.0 从左到右模块和阴影 DOM

Question

我有一个支持 "right to left" 语言（例如阿拉伯语）的网站。如果语言是阿拉伯语，我会在正文标签上添加 dir="rtl" 属性。以这种方式，所有内联定位的子元素都从右侧对齐，即使它们在自定义组件中也是如此。

现在我想要一个自定义样式，以防这些组件之一继承从右到左的指令。常见的实现方式如下：

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

问题是，使用阴影 DOM，选择器不会获得父级的属性，因此不会应用我的样式。因此，我想知道是否有任何方法可以使用 Angular 2.0 从父属性显式继承模块？这样我就可以简单地写

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

我完成了……

Answer 1

除非您设置 ViewEncapsulation.Native，否则 Angular2 中没有阴影 DOM。是你做的吗？ Angular2 中的样式应该没有问题。您可以使用 >>> 或 /deep/ 来跨越组件边界。

如果您动态添加 HTML（通过一些非 Angular JS 库），那么 >>> 和 /deep/ 也可以使用，但这需要看起来更多演示您的情况的代码。

Answer 2

3种可能的方式：

一个。最佳解决方案

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

乙。依赖 :dir pseudo-class

无处不在（还？）

C.以编程方式显式地将 class 放入组件（错误）

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;
  }
}

Angular 2.0 从左到右模块和阴影 DOM

Angular 2.0 left to right module and shadow DOM

shadow-dom

angular