用 ngx-translate 访问当前语言

ngx-translate 是一个用于 Angular 应用程序国际化（i18n）的库。它提供了一个方便的方式来翻译应用程序的文本和标签。ngx-translate 支持多种语言并能够检测当前用户的语言偏好，以便于正确显示所需的文本。

在 ngx-translate 中，访问当前语言可以通过 translateService.currentLang 属性来实现。该属性返回当前用户的语言偏好，以便于正确地显示文本。

以下是一个示例代码，演示了如何使用 ngx-translate 访问当前语言：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'HELLO' | translate }}</h1>
  `
})
export class AppComponent {
  constructor(private translateService: TranslateService) {
    console.log('Current language: ' + this.translateService.currentLang);
  }
}

在上面的代码中，我们使用了 translate 管道来翻译文本，并在 AppComponent 的构造函数中打印了当前语言的名称。

需要注意的是，为了正确地检测用户的语言偏好，需要在 app.module.ts 中设置 ngx-translate 的配置。以下是一个示例配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => {
          return new TranslateHttpLoader(http);
        },
        deps: [HttpClient]
      }
    })
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

在上面的配置中，我们使用了 TranslateHttpLoader 来加载 ngx-translate 的翻译文件。这些翻译文件可以通过在 assets/i18n 目录下创建对应语言的 JSON 文件来定义。

例如，如果我们想要支持英语和法语，可以创建以下两个文件：

assets/i18n/en.json：

{
  "HELLO": "Hello",
  "WORLD": "World"
}

assets/i18n/fr.json：

{
  "HELLO": "Bonjour",
  "WORLD": "le monde"
}

通过使用 translateService.use() 方法，我们可以随时更改当前使用的语言。例如，要更改为法语可以使用以下代码：

this.translateService.use('fr');

如果当前语言不在所支持的语言列表中，ngx-translate 将会使用默认语言作为回退（在上面的配置示例中为英语）。

综上所述，ngx-translate 提供了一个易于使用的库，可以轻松实现 Angular 应用程序的国际化。通过访问 translateService.currentLang 属性，我们可以轻松地访问当前用户的语言偏好。