angular8+ng-zorro i18n方案

1.采用的技術(shù)方案

 ng-zorro的國際化NzI18nService服務(wù) + ngx-translate插件。
 ng-zorro NzI18nService服務(wù)主要用來配置ng-zorro組件的國際化；
 ngx-translate插件主要用來翻譯頁面的文字顯示。

2.實現(xiàn)的具體方案

  1) 安裝所需的依賴
   npm install @ngx-translate/core --save
   npm install @ngx-translate/http-loader --save

  2) 引入TranslateModule模塊
    在AppModule中引入TranslateModule模塊
    import {TranslateModule} from '@ngx-translate/core';
    根路由引入TranslateModule模塊相關(guān)配置并在imports中配置如下：

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

    配置AppModule的 imports如下：

  TranslateModule.forRoot({
       loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
             deps: [HttpClient]
         }
    }),
 最后在模塊之外導(dǎo)出 HttpLoaderFactory   
  export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
   }

  3) 引入語言json文件
     語言json文件是用來對頁面文字進(jìn)行翻譯的根據(jù)，需要自己編寫。en.json是翻譯 
     成英文的文件，zh.json是翻譯成中文的文件。
     推薦在assets中引入語言文件。

  4) 設(shè)置語言；
     通常在AppComponent中設(shè)置默認(rèn)的語言
     1）ng-zorro組件的默認(rèn)語言設(shè)置，使用registerLocaleData()設(shè)置，切換語言使用this.i18n.setLocale()方法，
     2）ngx-translate設(shè)置默認(rèn)語言，使用translate.setDefaultLang()設(shè)置，切換語言時使用this.translate.setDefaultLang(),
     設(shè)置語言后，全局可通用。

5）頁面翻譯：
    只需要在翻譯的模塊中引入TranslateModule模塊，component中引入TranslateService即可
   - html中翻譯
     加入管道符 translate即可（包括頁面的靜態(tài)字符串和變量均可），
     如：<button nz-button class="login-form-button" [nzType]="'primary'">{{'登錄'| translate}}</button>
    -ts中翻譯
       使用this.translate.get(需要翻譯的變量)，即可得到翻譯后的結(jié)果，
       如：
            this.translate.get(data.reason).subscribe(val => {
                 this.msg = val;
                  this.message.create('error', this.msg );
             })