如何在不知道谁具有dir属性的情况下获得方向（rtl / ltr）？

Question

我不会根据父级方向创建具有不同样式的组件。

例如：

const json = `[
   {"priority": 1, "name": "BIR FORMS"},
   {"priority": 0, "name": "Pag-Ibig"},
   {"priority": 0, "name": "SSS"}
]`;
const parsedJson = JSON.parse(json);

console.log(`${parsedJson[0].name}, ${parsedJson[0].priority}`);

相当于<!-- some tags with dir attribute --> <my-component></my-component> <!--close some tags with dir attribute --> 并具有Chrome支持吗？

更新： 这是可行的，但是我如何在其他样式中使用它？

:dir(ltr)

Answer 1

如果要从组件内部进行调整，可以使用:host-context选择器：

@Component({
  template: `
    <div class="with-border">Lorem</div>
  `,
  selector: 'my-component',
  styles: [`
    :host-context([dir='rtl']) .with-border {
      border-left: dashed;
    }
    :host-context([dir='rtl']) .with-border {
      border-right: dashed;
    }
  `]
})
export class MyComponent {}