Question

我有一个网站支持＆＃34;从右到左＆＃34;语言如阿拉伯语。如果语言是阿拉伯语，我在body标签上加上dir="rtl"属性。通过这种方式，所有内联定位的子项都从右侧对齐，即使它们位于自定义组件中。

现在我希望有一个自定义样式，或者其中一个组件继承了一个从右到左的指令。实现目标的常用方法如下：

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

问题是，使用shadow DOM，选择器将无法获取父属性，因此我的样式将不会被应用。因此，我想知道模块是否有任何方式使用Angular 2.0显式继承父属性？通过这种方式，我可以简单地写

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

我完成了......

Answer 1

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

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

Answer 2

3可能的方式：

一个。最佳解决方案

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

B中。不依赖于:dir pseudo-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

2 个答案: