Question

所以问题是，是否可以使用渲染器来调整主要Angular 2 app组件之外的标签，比如标签？如果是，那么最好的方法是什么？

让我给出一些背景知识。我正在尝试使用Angular 2构建一个多语言站点，我遇到了一个我无法找到解决方案的问题。问题是我在html标签中使用lang属性来定义网站每个时刻的语言，例如：

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

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

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

谢谢

Answer 1

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

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

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组件访问root html标记

1 个答案: