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即可（包括頁面的靜態(tài)字符串和變量均可），
如：<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 );
})最后編輯于 ：2020.03.27 17:08:17
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
