8.ng-zorro项目中英文

ngx-translate

项目要求添加中英文环境，使用ngx-translate来实现中英文切换。

1.下载

用npm下载ngx-translate，并添加到项目依赖。

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

不同版本的angular需要下载对应版本的ngx-translate，最新的可到官网查看。

Angular	@ngx-translate/core	@ngx-translate/http-loader
10	13.x+	6.x+
9	12.x+	5.x+
8	12.x+	4.x+
7	11.x+	4.x+
6	10.x	3.x

2.引入到项目中

先在assets/i18n/创建本地文件，也可以在服务器上维护中英文文件。

zh.json

{
   "LOGINPAGE": {
       "LOGIN" : "登录"
   } 
}

en.json

{
   "LOGINPAGE": {
       "LOGIN" : "login"
   } 
}

修改app.module.ts文件，引入ngx-translate

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { HttpClient } from '@angular/common/http';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

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

import { LayoutModule } from '@layout/layout.module';
import { RoutesModule } from '@routes/routes.module';
import { CoreModule } from '@core/core.module';

// 加载i18n语言文件
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, `assets/i18n/`, '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    LayoutModule,
    RoutesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在根目录引入后，惰性加载的模块需要在shared模块中引入才能使用

shared.module.ts

TranslateModule.forChild(),

3.页面使用

业务需求在登录页面来操作切换中英文，默认记录上次选择

login.component.ts

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

@Component({
  selector: 'app-passport-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less'],
})
export class UserLoginComponent {
  // 从本地获取当前语言，为空默认为中文
  private lan = localStorage.getItem('language') || 'zh';
  constructor(private translateService: TranslateService,) {
    this.translateService.use(this.lan);
  }
  // 切换语言，简单实现，
  toggleLan() {
    this.lan = this.lan === 'zh' ? 'en' : 'zh';
    this.translateService.use(this.lan);
    localStorage.setItem('language', this.lan);
  }
}

login.component.html

<button (click)="toggle()">切换语言</button>
<button>{{ "LOGINPAGE.LOGIN" | translate }}</button>

如果是接口返回的，直接使用

this.translateService.setTranslation('en', {
   "LOGINPAGE": {
       "LOGIN" : "lg"
   } 
});

其他用法

<div [translate]="'LOGINPAGE.LOGIN'"></div>
<div translate>LOGINPAGE.LOGIN</div>

4.错误处理

如果项目中使用http拦截器，请求本地JSON文件可能会出现错误情况，对本地文件不做处理即可。

default.interceptor.ts

private handleData(ev: HttpResponseBase): Observable<any> {
    // 对于本地文件进行特殊处理
    if (ev.url.indexOf('/assets/i18n/') !== -1) { return of(ev); }
    

或者修改 json文件，保持和接口返回一致

zh.json

{
    "head":{},
    "data":{
        "LOGINPAGE": {
            "LOGIN" : "登录"
        }
    }
}