从Angular 2组件访问root html标记

发布时间：2020-12-17 17:42:47 所属栏目：安全来源：网络整理

导读：所以问题是,是否可以使用Renderer来调整主要Angular 2应用程序组件之外的标签,比如标签？如果是,那么最好的方法是什么？让我来介绍一下背景.我正在尝试使用Angular 2构建一个多语言站点,我遇到了一个我无法找到解决方案的问题.问题是我在html标签中使用lang

所以问题是,是否可以使用Renderer来调整主要Angular 2应用程序组件之外的标签,比如标签？如果是,那么最好的方法是什么？

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

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

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

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

谢谢

解决方法

您可以使用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);
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!