从Angular 2组件访问根HTML标签

Question

从Angular 2组件访问根HTML标签

10

所以问题是，是否可以使用Renderer来调整位于主要Angular 2应用组件之外的标签，比如< html >标签？如果可以，最好的方法是什么？

让我先简单介绍一下背景。我正在尝试使用Angular 2构建多语言站点，并遇到了一个找不到解决方案的问题。问题在于我正在使用html标记中的lang属性来定义网站当前使用的语言，例如：

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

因此，当用户点击不同的语言时，我使用ng2-translate更新网站语言，这很完美。问题是我需要相应地更新“lang”属性，但我找不到在Angular 2中执行此操作的正确方法（如果可能的话）。目前，我直接操作DOM，但这对我来说行不通，因为我需要抽象出来（我也在使用Universal，所以需要服务器端渲染）。

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

谢谢

- Markel Arizaga

这个回答解决了您的问题吗？Angular-在根index.html中更新html属性 - Luyang Du

嘿，谢谢你的建议。我看到链接问题中被接受的答案直接使用文档，这是我想避免的。将那个答案标记为这个问题的正确答案可能会产生误导。我认为这个问题中被接受的答案更好地反映了我所寻找的内容。 - Markel Arizaga

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Strahm · Accepted Answer

您可以使用 Angular 中的 DOCUMENT DI Token 来执行 DOM 操作：

DOCUMENT

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);
    }
}