Как получить направление (rtl / ltr), не зная, у кого есть атрибут dir?

Question

Я хочу создать компонент с другим стилем в соответствии с родительским направлением.

например:

<!-- some tags with dir attribute -->
<my-component></my-component>
<!--close some tags with dir attribute -->

что-то эквивалентное :dir(ltr) с поддержкой Chrome?

Обновление: это работа, но как я могу использовать ее в другом стиле?

[dir='rtl']  mat-header-cell {
  border-left: dashed;
}
[dir='ltr']  mat-header-cell {
  border-right: dashed;
} 

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