Question

我的index.html中包含以下内容

<!doctype html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8">
        <title>Halls Gate</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/png" href="assets/img/favicon.png">
        <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet">
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

我想根据所选语言从组件<html dir="ltr" lang="en">更新html元素中的dir和lang属性。

在Angular中有没有办法解决这个问题？

谢谢。

Answer 1

我认为，可以简单地对其进行更改...

enter image description here

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  constructor(private renderer: Renderer2) {
    this.renderer.setAttribute(document.querySelector('html'), 'lang', 'tr');
  }
}

Answer 2

这将是一个坏习惯。您应该改用Internationalization。国际化是设计和准备可在不同语言中使用的应用程序的过程。本地化是将您的国际化应用程序翻译成针对特定语言环境的特定语言的过程。

开始使用：

ng serve --configuration=your locale id

Answer 3

如果您正在使用angular-i18n并想根据构建更改语言环境，则可以执行此操作

import {Component, Inject, LOCALE_ID} from '@angular/core';
import {DOCUMENT} from '@angular/common'; 
...
export class AppComponent implements OnInit {
  ...
  constructor(@Inject(DOCUMENT) private document: Document, @Inject(LOCALE_ID) locale: string) {
     this.document.documentElement.lang  = locale;
  }
  ...
}

Angular-更新根index.html中的html属性

3 个答案: