526互联

ng-zorro-antd框架的国际化配置与切换

发布时间 2023-07-10 09:42:49作者: 黒马

背景

在使用ngx-translate进行国际化, 在英文模式下, ng-zorro-antd的相关组件如日期组件nz-date-picker中依然有中文

原因

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { zh_CN } from 'ng-zorro-antd/i18n';
// 1.仅注册了中文语言
registerLocaleData(zh);

// 2.设置了初始语言为中文
 providers: [{ provide: NZ_I18N, useValue: zh_CN }]

处理

// 1. 添加英文语言注册
import en from '@angular/common/locales/en';
registerLocaleData(en);


// 2. 在切换语言环境的逻辑中添加语言设置
import { NzI18nService, en_US } from 'ng-zorro-antd';
constructor(public i18n: NzI18nService) {}
this.i18n.setLocale(en_US);