angular8+ng-zorro支持i18n

angular8+ng-zorro i18n方案

1.采用的技术方案

 ng-zorro的国际化NzI18nService服务 + ngx-translate插件。
 ng-zorro NzI18nService服务主要用来配置ng-zorro组件的国际化；
 ngx-translate插件主要用来翻译页面的文字显示。

2.实现的具体方案

  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模块相关配置并在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]
         }
    }),
 最后在模块之外导出 HttpLoaderFactory   
  export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
   }

  3) 引入语言json文件
     语言json文件是用来对页面文字进行翻译的根据，需要自己编写。en.json是翻译 
     成英文的文件，zh.json是翻译成中文的文件。
     推荐在assets中引入语言文件。

  4) 设置语言；
     通常在AppComponent中设置默认的语言
     1）ng-zorro组件的默认语言设置，使用registerLocaleData()设置，切换语言使用this.i18n.setLocale()方法，
     2）ngx-translate设置默认语言，使用translate.setDefaultLang()设置，切换语言时使用this.translate.setDefaultLang(),
     设置语言后，全局可通用。

5）页面翻译：
    只需要在翻译的模块中引入TranslateModule模块，component中引入TranslateService即可
   - html中翻译
     加入管道符 translate即可（包括页面的静态字符串和变量均可），
     如：<button nz-button class="login-form-button" [nzType]="'primary'">{{'登录'| translate}}</button>
    -ts中翻译
       使用this.translate.get(需要翻译的变量)，即可得到翻译后的结果，
       如：
            this.translate.get(data.reason).subscribe(val => {
                 this.msg = val;
                  this.message.create('error', this.msg );
             })