Angular(7) 学习资料 （8）i18n

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20282263/article/details/88049632

i18n

应用程序的国际化涉及到开发的很多方面，主要是如何让应用可以被全世界的用户使用而且用起来比较友好。本章内容主要讲的下面几个方面：

• Angular 内置国际化
• ngx-translate : 用来给我们自己的组件添加国际化支持，主要模块是 @ngx-translate/core,@ngx-translate/http-loader
• ng-zorro-antd : 使用的第三方组件库，其内部使用到了 angular 内置的国际化文件

Angular

我们一般不会直接使用内置的 i18n，这里会使用 ngx-translate。而我们使用的 ng-zorro-antd 组件库其需要用到内置的 i18n。因此这里我们只是讲解一下如何进行切换。

一般指定内置的语言有两种：一种是在 AppModule 中直接指定。另外一种是使用 registerLocaleData 管道动态加载

import { LOCALE_ID, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from '../src/app/app.component'
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}


import { registerLocaleData } from '@angular/common'
import localeFr from '@angular/common/locales/fr'
registerLocaleData(localeFr, 'fr');

ngx-translate

在安装 ngx-translate 的时候最少需要安装这两个主要的模块：@ngx-translate/core 和 @ngx-translate/http-loader。一个是其核心模块，一个是其加载模块，使用 HttpClient 加载对应的国际化文件

定义并加载国际化文件

import { NgModule } from '@angular/core'
import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http'
import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => {
          // 国际化的文件地址
          return new TranslateHttpLoader(http, '../assets/i18n/', '.json')
        },
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

动态切换语言

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

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.less']
})
export class LayoutComponent implements OnInit {
  constructor(private translate: TranslateService) {}

  ngOnInit() {
    // 这里值得是国际化的文件名
    his.translate.setDefaultLang('zh')
  }
}

模板中使用

<span>{{ 'username' | translate }}</span>

ng-zorro-antd

import { Component, OnInit } from '@angular/core'
import { zh_CN, en_US, NzI18nService } from 'ng-zorro-antd'

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.less']
})
export class LayoutComponent implements OnInit {
  constructor(private nzI18n: NzI18nService) {}

  ngOnInit() {
    this.nzI18n.setLocale(zh_CN)
  }
}

完整的示例

import { Component, OnInit } from '@angular/core'
import { registerLocaleData } from '@angular/common'
import zh from '@angular/common/locales/zh'
import en from '@angular/common/locales/en'
import { TranslateService } from '@ngx-translate/core'
import { zh_CN, en_US, NzI18nService } from 'ng-zorro-antd'

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.less']
})
export class LayoutComponent implements OnInit {
  private local = 'zh'

  constructor(
    private login: LoginService,
    private translate: TranslateService,
    private nzI18n: NzI18nService
  ) {}

  ngOnInit() {
    this.setLoacl()
  }

  setLoacl() {
    // 同步切换
    registerLocaleData(this.local === 'en' ? en : zh)
    this.nzI18n.setLocale(this.local === 'en' ? en_US : zh_CN)
    this.translate.setDefaultLang(this.local)
  }

  // 切换语言的事件
  resetLocal() {
    if (this.local === 'en') {
      this.local = 'zh'
    } else {
      this.local = 'en'
    }
    this.setLoacl()
  }
}