ng-zorro-antd - TimePicker 组件中获取中文文本

Question

我已经为 TimePicker 编写了代码，但文本是中文的。

<nz-form-item>
<nz-form-label nzFor="shiftTimings">Shift Timings</nz-form-label>
<nz-form-control>
  <nz-time-picker formControlName="shiftTimings"></nz-time-picker>
  <button *ngIf="multiShifts" nz-button nzType="default" nzShape="circle" [nzSize]="small"><i class="anticon anticon-plus"></i></button>
</nz-form-control>

有人可以帮忙吗？ 带有中文文字“选择时间”的输入框的图像

Answer 1

方法一：

文档中描述的标准方法。

在app.module添加

import { NgZorroAntdModule, NZ_I18N, en_US } from 'ng-zorro-antd';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

并在提供者数组中，添加：

  providers: [{ provide: NZ_I18N, useValue: en_US }],

PS：如果 NgZorroAntdModule 加载到功能模块中，这不起作用 （最后在 ngZorro 7.5.0 上验证）在这种情况下，请使用方法 2。

方法二：

在component您使用日期选择器时，调用 ngZorro 的 i18n 服务并更改语言：

  import { en_US, NzI18nService } from 'ng-zorro-antd';
    ..
    constructor(private i18n: NzI18nService) {
    }
    ....
    ngOnInit() {
         this.i18n.setLocale(en_US);
    }

PS：您也可以从首先加载的任何组件中进行设置。