如何在运行时更改 Angular CDK 覆盖层的 dir 属性？

Question

我使用的是 Angular 10，单击后将执行以下函数来执行方向更改：

private changeHtmlDirection(direction: 'rtl' | 'ltr') {
    document.getElementsByTagName("html")[0].dir = direction;
}

效果很好，只是 Angular CDK 没有更新。

我试图找到一个 API 来在运行时更改 Angular CDK 的方向，但没有找到。我看到有一个 BidiModule 但它仅用于获取当前方向而不是设置它。

有什么解决办法吗？

Answer 1

根据材料文档，您不能更改“html”标签上的“dir”，以免影响 bidi API。您可以通过以下链接查看该文档：双向文档

但是如果您想使用材质双向性，您可以将“dir”指令添加到根组件中的容器元素，如下所示：

<div [dir]="documentDirection"> </div>

每当“documentDirection”变量发生变化时，都会发出 bidi“更改发射器”。就像下面的代码一样，您可以订阅它：

constructor(
private dir: Directionality ) {
this.isRtl = dir.value === 'rtl';
 this.dir.change.subscribe(() => {
  this.isRtl = !this.isRtl;
 });

}

Answer 2

在 Angular Material 16 中，只需将目录传递给对话框配置