从 Angular 2 组件访问根 html 标签

Question

所以问题是，是否可以使用渲染器调整主 Angular 2 应用程序组件之外的标签，例如标签？如果是，最好的方法是什么？

让我介绍一下背景。我正在尝试使用 Angular 2 构建一个多语言站点，但遇到了一个我找不到解决方案的问题。问题是我在 html 标签中使用 lang 属性来定义站点在每个时刻使用的语言，例如：

<html lang="en"> // When we have English locale active

因此，当用户点击不同的语言时，我会使用 ng2-translate 更新网站语言，效果非常好。问题是我需要相应地更新属性但我无法在 Angular 2 中找到正确的方法（如果可能的话）。现在，我直接接触 DOM 但这对我不起作用，因为我需要从中抽象出来（我也在使用 Universal，所以我需要服务器端渲染才能工作）。

目前，应用程序的样式依赖于此属性（我们支持阿拉伯语，这意味着如果 lang="ar" 则更改文本的方向）。我想我可以在我的主要组件上使用 class 或类似的东西，但使用 lang 属性对我来说似乎是正确的方法。有什么想法吗？

谢谢

Answer 1

您可以使用来自 Angular 的 DOCUMENT DI 令牌执行 Dom 操作：

import { Inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { DOCUMENT } from '@angular/common';

export class AppComponent {

    constructor(private translate: TranslateService, @Inject(DOCUMENT) private _document: any) {
        translate.onLangChange.map(x => x.lang)
            .subscribe(lang => this._document.documentElement.lang = lang);
    }
}

从 Angular 2 组件访问根 html 标签

Accessing root html tag from an Angular 2 component

html

angular

renderer