From 552fa5032840df53bef35991ef4d86350864fd7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C=E4=BA=A6?= Date: Sun, 8 Oct 2017 16:11:28 +0800 Subject: [PATCH] feat(i18n): support i18n functionality (zh-CN, en-US currently) close #427 --- .../calendar/nz-calendar.component.ts | 7 +- src/components/calendar/nz-calendar.module.ts | 3 +- .../datepicker/nz-datepicker.component.ts | 47 ++++--- .../datepicker/nz-datepicker.module.ts | 3 +- .../input-number/nz-input-number.component.ts | 2 +- src/components/locale/index.ts | 4 + src/components/locale/locales/en-US.ts | 60 ++++++++ src/components/locale/locales/index.ts | 2 + src/components/locale/locales/zh-CN.ts | 60 ++++++++ src/components/locale/nz-locale.class.ts | 53 +++++++ src/components/locale/nz-locale.module.ts | 18 +++ src/components/locale/nz-locale.service.ts | 54 ++++++++ src/components/locale/nz-locale.token.ts | 4 + src/components/locale/nz-translate.pipe.ts | 13 ++ src/components/modal/nz-confirm.component.ts | 5 +- src/components/modal/nz-modal.component.ts | 11 +- src/components/modal/nz-modal.module.ts | 3 +- src/components/modal/nz-modal.service.ts | 8 +- src/components/ng-zorro-antd.module.ts | 12 ++ .../pagination/nz-pagination.component.ts | 24 ++-- .../pagination/nz-pagination.module.ts | 3 +- .../popconfirm/nz-popconfirm.component.ts | 12 +- .../popconfirm/nz-popconfirm.module.ts | 4 +- src/components/select/nz-select.component.ts | 8 +- src/components/select/nz-select.module.ts | 3 +- src/components/table/nz-table.component.ts | 2 +- src/components/table/nz-table.module.ts | 6 +- .../nz-timepicker-inner.component.ts | 5 +- .../time-picker/nz-timepicker.component.ts | 2 +- .../time-picker/nz-timepicker.module.ts | 3 +- src/components/util/logger/index.ts | 2 + src/components/util/logger/logger.module.ts | 11 ++ src/components/util/logger/logger.service.ts | 52 +++++++ src/showcase/app.module.ts | 5 + .../nz-demo-button/nz-demo-button.html | 2 +- src/showcase/nz-demo-locale/README.md | 26 ++++ .../nz-demo-locale-all.component.ts | 131 ++++++++++++++++++ .../nz-demo-locale.component.html | 32 +++++ .../nz-demo-locale.component.ts | 17 +++ .../nz-demo-locale/nz-demo-locale.module.ts | 29 ++++ .../nz-demo-modal/nz-demo-modal.component.ts | 2 +- src/showcase/nz-intro-i18n/README.md | 29 ++++ .../nz-intro-i18n.component.html | 1 + .../nz-intro-i18n/nz-intro-i18n.component.ts | 14 ++ .../nz-intro-i18n/nz-intro-i18n.module.ts | 18 +++ src/showcase/nz-intro-index/README.md | 4 +- src/showcase/router.ts | 117 +++++++++------- 47 files changed, 811 insertions(+), 122 deletions(-) create mode 100644 src/components/locale/index.ts create mode 100644 src/components/locale/locales/en-US.ts create mode 100644 src/components/locale/locales/index.ts create mode 100644 src/components/locale/locales/zh-CN.ts create mode 100644 src/components/locale/nz-locale.class.ts create mode 100644 src/components/locale/nz-locale.module.ts create mode 100644 src/components/locale/nz-locale.service.ts create mode 100644 src/components/locale/nz-locale.token.ts create mode 100644 src/components/locale/nz-translate.pipe.ts create mode 100644 src/components/util/logger/index.ts create mode 100644 src/components/util/logger/logger.module.ts create mode 100644 src/components/util/logger/logger.service.ts create mode 100644 src/showcase/nz-demo-locale/README.md create mode 100644 src/showcase/nz-demo-locale/nz-demo-locale-all.component.ts create mode 100644 src/showcase/nz-demo-locale/nz-demo-locale.component.html create mode 100644 src/showcase/nz-demo-locale/nz-demo-locale.component.ts create mode 100644 src/showcase/nz-demo-locale/nz-demo-locale.module.ts create mode 100644 src/showcase/nz-intro-i18n/README.md create mode 100644 src/showcase/nz-intro-i18n/nz-intro-i18n.component.html create mode 100644 src/showcase/nz-intro-i18n/nz-intro-i18n.component.ts create mode 100644 src/showcase/nz-intro-i18n/nz-intro-i18n.module.ts diff --git a/src/components/calendar/nz-calendar.component.ts b/src/components/calendar/nz-calendar.component.ts index e42ea1a5504..653dbe532e2 100644 --- a/src/components/calendar/nz-calendar.component.ts +++ b/src/components/calendar/nz-calendar.component.ts @@ -12,7 +12,8 @@ import { import * as moment from 'moment'; import { Moment } from 'moment'; -import 'moment/locale/zh-cn'; +// import 'moment/locale/zh-cn'; +import { NzLocaleService } from '../locale'; export interface MonthInterface { index: number; @@ -207,7 +208,7 @@ export class NzCalendarComponent implements OnInit { _showMonth = moment(new Date()).month(); _showYear = moment(new Date()).year(); _value: Date = new Date(); - _locale = 'zh-cn'; + _locale = this._localeService.getLocale().locale; @ContentChild('dateCell') dateCell: TemplateRef; @ContentChild('monthCell') monthCell: TemplateRef; @@ -372,7 +373,7 @@ export class NzCalendarComponent implements OnInit { return listOfYears; }; - constructor(private _elementRef: ElementRef) { + constructor(private _elementRef: ElementRef, private _localeService: NzLocaleService) { this._el = this._elementRef.nativeElement; } diff --git a/src/components/calendar/nz-calendar.module.ts b/src/components/calendar/nz-calendar.module.ts index b1025dfd4f3..34f0dcab620 100644 --- a/src/components/calendar/nz-calendar.module.ts +++ b/src/components/calendar/nz-calendar.module.ts @@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common'; import { NzSelectModule } from '../select/nz-select.module'; import { NzRadioModule } from '../radio/nz-radio.module'; import { FormsModule } from '@angular/forms'; +import { NzLocaleModule } from '../locale'; @NgModule({ - imports : [ CommonModule, NzSelectModule, NzRadioModule, FormsModule ], + imports : [ CommonModule, NzSelectModule, NzRadioModule, FormsModule, NzLocaleModule ], declarations: [ NzCalendarComponent ], exports : [ NzCalendarComponent ] }) diff --git a/src/components/datepicker/nz-datepicker.component.ts b/src/components/datepicker/nz-datepicker.component.ts index 86b8dd973fe..679657ef7df 100644 --- a/src/components/datepicker/nz-datepicker.component.ts +++ b/src/components/datepicker/nz-datepicker.component.ts @@ -14,6 +14,7 @@ import { DropDownAnimation } from '../core/animation/dropdown-animations'; import { NzTimePickerInnerComponent } from '../time-picker/nz-timepicker-inner.component'; import { DEFAULT_DATEPICKER_POSITIONS } from '../core/overlay/overlay-position-map'; import { ConnectionPositionPair } from '@angular/cdk/overlay'; +import { NzLocaleService } from '../locale'; @Component({ selector : 'nz-datepicker', @@ -64,36 +65,36 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay'; #dateBox (blur)="_blurInput(dateBox)"> - +
- - + + {{_showYear}} x - +
- - + + {{_startDecade}}-{{_startDecade + 9}} x - +
@@ -145,7 +146,7 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay';
- {{nzShowTime ? '此刻' : '今天'}} - 选择时间 - 选择日期 - 确 定 + {{ (nzShowTime ? 'DateTime.thisMoment' : 'DateTime.today') | nzTranslate }} + {{ 'DateTime.chooseTime' | nzTranslate }} + {{ 'DateTime.chooseDate' | nzTranslate }} + {{ 'DateTime.ok' | nzTranslate }}
@@ -204,7 +205,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit { @Input() nzDisabledDate; @Input() nzAllowClear = true; @Input() nzShowTime: any = null; - @Input() nzPlaceHolder = '请选择日期'; + @Input() nzPlaceHolder = this._locale.translate('DateTime.chooseDatePlease'); @Input() nzFormat = 'YYYY-MM-DD'; @Input() nzSize = ''; @Input() nzMode: 'day' | 'month' = 'day'; @@ -390,7 +391,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit { this._yearPanel[ 3 ].push('end'); } - constructor(private _elementRef: ElementRef, private _cdr: ChangeDetectorRef) { + constructor(private _elementRef: ElementRef, private _cdr: ChangeDetectorRef, private _locale: NzLocaleService) { this._el = this._elementRef.nativeElement; } diff --git a/src/components/datepicker/nz-datepicker.module.ts b/src/components/datepicker/nz-datepicker.module.ts index ac963026a08..02f48f708c4 100644 --- a/src/components/datepicker/nz-datepicker.module.ts +++ b/src/components/datepicker/nz-datepicker.module.ts @@ -7,9 +7,10 @@ import { NzUtilModule } from '../util/nz-util.module'; import { NzCalendarModule } from '../calendar/nz-calendar.module'; import { FormsModule } from '@angular/forms'; import { OverlayModule } from '@angular/cdk/overlay'; +import { NzLocaleModule } from '../locale'; @NgModule({ - imports : [ CommonModule, NzTimePickerModule, NzUtilModule, NzInputModule, NzCalendarModule, FormsModule, OverlayModule ], + imports : [ CommonModule, NzTimePickerModule, NzUtilModule, NzInputModule, NzCalendarModule, FormsModule, OverlayModule, NzLocaleModule ], declarations: [ NzDatePickerComponent ], exports : [ NzDatePickerComponent ] }) diff --git a/src/components/input-number/nz-input-number.component.ts b/src/components/input-number/nz-input-number.component.ts index 36b07659ce4..194c3479055 100644 --- a/src/components/input-number/nz-input-number.component.ts +++ b/src/components/input-number/nz-input-number.component.ts @@ -12,7 +12,7 @@ import { } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { TAB } from '@angular/cdk'; +import { TAB } from '@angular/cdk/keycodes'; @Component({ selector : 'nz-input-number', diff --git a/src/components/locale/index.ts b/src/components/locale/index.ts new file mode 100644 index 00000000000..8c71daae37c --- /dev/null +++ b/src/components/locale/index.ts @@ -0,0 +1,4 @@ +export { NzLocaleModule } from './nz-locale.module'; +export { NZ_LOCALE } from './nz-locale.token'; +export { NzLocaleService } from './nz-locale.service'; +export * from './locales'; diff --git a/src/components/locale/locales/en-US.ts b/src/components/locale/locales/en-US.ts new file mode 100644 index 00000000000..879b7c1f7a5 --- /dev/null +++ b/src/components/locale/locales/en-US.ts @@ -0,0 +1,60 @@ +import { NzLocale } from '../nz-locale.class'; +import * as moment from 'moment'; + +const LOCALE = 'en-US'; + +moment.locale(LOCALE); + +export const enUS: NzLocale = { + locale: LOCALE, + + Pagination: { + itemsPerPage: '%num% / page', + jumpTo: 'Goto', + page: '', + forwardPage: '%num% pages forward', + backwardPage: '%num% pages backward', + prevPage: 'Previous page', + nextPage: 'Next page', + firstPage: 'First page', + lastPage: 'Last page: %page%', + totalItems: '%total% items', + }, + + DateTime: { + clear: 'Clear', + chooseMonth: 'Choose a month', + chooseYear: 'Choose a year', + chooseDecade: 'Choose a decade', + nYear: '%num%', + nMonth: '%num%', + nDay: '%num%', + prevYear: 'Previous year', + nextYear: 'Next year', + prevMonth: 'Previous month', + nextMonth: 'Next month', + prevDecade: 'Previous decade', + nextDecade: 'Next decade', + chooseTime: 'Select time', + chooseDate: 'Select date', + chooseTimePlease: 'Select time', + chooseDatePlease: 'Select date', + thisMoment: 'This moment', + today: 'Today', + ok: 'Ok', + }, + + Modal: { + okText: 'OK', + cancelText: 'Cancel', + understood: 'Got it', + }, + + Table: { + emptyText: 'No data', + }, + + Select: { + notFoundContent: 'Not Found', + }, +}; diff --git a/src/components/locale/locales/index.ts b/src/components/locale/locales/index.ts new file mode 100644 index 00000000000..cc1f1e5f9a4 --- /dev/null +++ b/src/components/locale/locales/index.ts @@ -0,0 +1,2 @@ +export * from './zh-CN'; +export * from './en-US'; diff --git a/src/components/locale/locales/zh-CN.ts b/src/components/locale/locales/zh-CN.ts new file mode 100644 index 00000000000..4656422d05d --- /dev/null +++ b/src/components/locale/locales/zh-CN.ts @@ -0,0 +1,60 @@ +import { NzLocale } from '../nz-locale.class'; +import * as moment from 'moment'; + +const LOCALE = 'zh-CN'; + +moment.locale(LOCALE); + +export const zhCN: NzLocale = { + locale: LOCALE, + + Pagination: { + itemsPerPage: '%num% 条/页', + jumpTo: '跳至', + page: '页', + forwardPage: '向前 %num% 页', + backwardPage: '向后 %num% 页', + prevPage: '上一页', + nextPage: '下一页', + firstPage: '第一页', + lastPage: '最后一页: %page%', + totalItems: '共 %total% 条', + }, + + DateTime: { + clear: '清除', + chooseMonth: '选择月份', + chooseYear: '选择年份', + nYear: '%num%年', + nMonth: '%num%月', + nDay: '%num%日', + prevYear: '上一年', + nextYear: '下一年', + prevMonth: '上个月', + nextMonth: '下个月', + prevDecade: '上一年代', + nextDecade: '下一年代', + chooseDecade: '选择年代', + chooseTime: '选择时间', + chooseDate: '选择日期', + chooseTimePlease: '请选择时间', + chooseDatePlease: '请选择日期', + thisMoment: '此刻', + today: '今天', + ok: '确 定', + }, + + Modal: { + okText: '确定', + cancelText: '取消', + understood: '知道了', + }, + + Table: { + emptyText: '没有数据', + }, + + Select: { + notFoundContent: '无法找到', + }, +}; diff --git a/src/components/locale/nz-locale.class.ts b/src/components/locale/nz-locale.class.ts new file mode 100644 index 00000000000..62d01254975 --- /dev/null +++ b/src/components/locale/nz-locale.class.ts @@ -0,0 +1,53 @@ +export class NzLocale { + locale: string; // Present of this locale's lang code + + Pagination: { + itemsPerPage: string; + jumpTo: string; + page: string; + forwardPage: string; + backwardPage: string; + prevPage: string; + nextPage: string; + firstPage: string; + lastPage: string; + totalItems: string; + }; + + DateTime: { + clear: string; + chooseMonth: string; + chooseYear: string; + nYear: string; + nMonth: string; + nDay: string; + prevYear: string; + nextYear: string; + prevMonth: string; + nextMonth: string; + prevDecade: string; + nextDecade: string; + chooseDecade: string; + chooseTime: string; + chooseDate: string; + chooseTimePlease: string; + chooseDatePlease: string; + thisMoment: string; + today: string; + ok: string; + }; + + Modal: { + okText: string; + cancelText: string; + understood: string; + }; + + Table: { + emptyText: string; + }; + + Select: { + notFoundContent: string; + }; +} diff --git a/src/components/locale/nz-locale.module.ts b/src/components/locale/nz-locale.module.ts new file mode 100644 index 00000000000..eeddd3ad2ed --- /dev/null +++ b/src/components/locale/nz-locale.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { LoggerModule } from '../util/logger'; + +import { NZ_LOCALE } from './nz-locale.token'; +import { zhCN } from './locales'; +import { NZ_LOCALE_SERVICE_PROVIDER } from './nz-locale.service'; +import { NzTranslatePipe } from './nz-translate.pipe'; + +@NgModule({ + imports: [ LoggerModule ], + declarations: [ NzTranslatePipe ], + exports: [ NzTranslatePipe ], + providers: [ + { provide: NZ_LOCALE, useValue: zhCN }, + NZ_LOCALE_SERVICE_PROVIDER, + ], +}) +export class NzLocaleModule { } diff --git a/src/components/locale/nz-locale.service.ts b/src/components/locale/nz-locale.service.ts new file mode 100644 index 00000000000..629798a22db --- /dev/null +++ b/src/components/locale/nz-locale.service.ts @@ -0,0 +1,54 @@ +import { Injectable, Inject, Provider, Optional, SkipSelf } from '@angular/core'; +import { LoggerService } from '../util/logger'; +import { NZ_LOCALE } from './nz-locale.token'; +import { NzLocale } from './nz-locale.class'; + +@Injectable() +export class NzLocaleService { + private _locale: NzLocale; + + constructor(@Inject(NZ_LOCALE) locale: NzLocale, private _logger: LoggerService) { + this.setLocale(locale); + } + + // [NOTE] Performance issue: this method may called by every change detections + // TODO: cache more deeply paths for performance + translate(path: string, data?: any) { + this._logger.debug(`[NzLocaleService] Translating(${this._locale.locale}): ${path}`); + let content = this._getObjectPath(this._locale, path); + if (typeof content === 'string') { + if (data) { + Object.keys(data).forEach((key) => content = content.replace(new RegExp(`%${key}%`, 'g'), data[key])); + } + return content; + } + return path; + } + + setLocale(locale: NzLocale) { + this._locale = locale; + } + + getLocale() { + return this._locale; + } + + private _getObjectPath(obj: Object, path: string): any { + const paths = path.split('.'), depth = paths.length; + let index = 0; + while (obj && index < depth) { + obj = obj[paths[index++]]; + } + return index === depth ? obj : null; + } +} + +export function NZ_LOCALE_SERVICE_PROVIDER_FACTORY(exist, locale, logger) { + return exist || new NzLocaleService(locale, logger); +} + +export const NZ_LOCALE_SERVICE_PROVIDER: Provider = { + provide: NzLocaleService, + useFactory: NZ_LOCALE_SERVICE_PROVIDER_FACTORY, + deps: [ [ new Optional, new SkipSelf, NzLocaleService ], NZ_LOCALE, LoggerService ], +}; diff --git a/src/components/locale/nz-locale.token.ts b/src/components/locale/nz-locale.token.ts new file mode 100644 index 00000000000..740cd0e30c2 --- /dev/null +++ b/src/components/locale/nz-locale.token.ts @@ -0,0 +1,4 @@ +import { InjectionToken } from '@angular/core'; +import { NzLocale } from './nz-locale.class'; + +export const NZ_LOCALE = new InjectionToken('nz-locale'); diff --git a/src/components/locale/nz-translate.pipe.ts b/src/components/locale/nz-translate.pipe.ts new file mode 100644 index 00000000000..1a89aaab07e --- /dev/null +++ b/src/components/locale/nz-translate.pipe.ts @@ -0,0 +1,13 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { NzLocaleService } from './nz-locale.service'; + +@Pipe({ + name: 'nzTranslate' +}) +export class NzTranslatePipe implements PipeTransform { + constructor(private _locale: NzLocaleService) {} + + transform(path: string, keyValue?: Object): any { + return this._locale.translate(path, keyValue); + } +} diff --git a/src/components/modal/nz-confirm.component.ts b/src/components/modal/nz-confirm.component.ts index 01607aad764..97d7472dba5 100644 --- a/src/components/modal/nz-confirm.component.ts +++ b/src/components/modal/nz-confirm.component.ts @@ -12,6 +12,7 @@ import { import { NzModalSubject } from './nz-modal-subject.service'; import nzGlobalMonitor from '../util/nz-global-monitor'; +import { NzLocaleService } from '../locale'; interface Position { x: number; @@ -86,7 +87,7 @@ export class NzConfirmComponent implements OnInit, OnDestroy { _content = ''; _maskClosable = true; _contentTpl: TemplateRef; - _okText = '知道了'; + _okText = this._locale.translate('Modal.understood'); _cancelText = ''; _animationStatus = ''; _confirmLoading = false; @@ -252,7 +253,7 @@ export class NzConfirmComponent implements OnInit, OnDestroy { } - constructor(public subject: NzModalSubject) { + constructor(public subject: NzModalSubject, private _locale: NzLocaleService) { } // 通过createComponent方法创建component时，ngOnInit不会被触发 diff --git a/src/components/modal/nz-modal.component.ts b/src/components/modal/nz-modal.component.ts index 4ff3a6b6635..14135704f8b 100644 --- a/src/components/modal/nz-modal.component.ts +++ b/src/components/modal/nz-modal.component.ts @@ -13,11 +13,13 @@ import { ComponentFactory, AfterViewInit, ViewContainerRef, - ComponentRef + ComponentRef, + Inject, } from '@angular/core'; import { NzModalSubject } from './nz-modal-subject.service'; import nzGlobalMonitor from '../util/nz-global-monitor'; +import { NzLocaleService } from '../locale'; interface Position { x: number; @@ -94,8 +96,8 @@ export class NzModalComponent implements OnInit, OnDestroy, AfterViewInit { _content = ''; _contentTpl: TemplateRef; _footerTpl: TemplateRef; - _okText = '确 定'; - _cancelText = '取 消'; + _okText = this._locale.translate('Modal.okText'); + _cancelText = this._locale.translate('Modal.cancelText'); _style: any = {}; _wrapClass = `${this._prefixCls}-wrap`; _customClass = ''; @@ -319,7 +321,8 @@ export class NzModalComponent implements OnInit, OnDestroy, AfterViewInit { } constructor(public subject: NzModalSubject, - private _vcr: ViewContainerRef) { + private _vcr: ViewContainerRef, + private _locale: NzLocaleService) { this.subject.modalId = this.modalId; } diff --git a/src/components/modal/nz-modal.module.ts b/src/components/modal/nz-modal.module.ts index e3aa6f45c82..211e87b9869 100644 --- a/src/components/modal/nz-modal.module.ts +++ b/src/components/modal/nz-modal.module.ts @@ -6,6 +6,7 @@ import { NzConfirmComponent } from './nz-confirm.component'; import { NzModalService } from './nz-modal.service'; import { NzModalSubject } from './nz-modal-subject.service'; +import { NzLocaleModule } from '../locale'; import { NzButtonModule } from '../button/nz-button.module'; @NgModule({ @@ -13,7 +14,7 @@ import { NzButtonModule } from '../button/nz-button.module'; providers : [ NzModalSubject, NzModalService ], declarations : [ NzModalComponent, NzConfirmComponent ], exports : [ NzModalComponent, NzConfirmComponent ], - imports : [ CommonModule, NzButtonModule ] + imports : [ CommonModule, NzLocaleModule, NzButtonModule ] }) export class NzModalModule { diff --git a/src/components/modal/nz-modal.service.ts b/src/components/modal/nz-modal.service.ts index b3e7ad0de67..3d608e5992e 100644 --- a/src/components/modal/nz-modal.service.ts +++ b/src/components/modal/nz-modal.service.ts @@ -12,6 +12,7 @@ import { NzModalComponent } from './nz-modal.component'; import { NzConfirmComponent } from './nz-confirm.component'; import { ModalOptions, ConfirmOptions } from './nz-modal-options.provider'; import { NzModalSubject } from './nz-modal-subject.service'; +import { NzLocaleService } from '../locale'; export interface ConfigInterface { type?: string; @@ -43,7 +44,8 @@ export class NzModalService { _confirmCompFactory: ComponentFactory; constructor(private _appRef: ApplicationRef, - private _cfr: ComponentFactoryResolver) { + private _cfr: ComponentFactoryResolver, + private _locale: NzLocaleService) { this._modalCompFactory = this._cfr.resolveComponentFactory(NzModalComponent); this._confirmCompFactory = this._cfr.resolveComponentFactory(NzConfirmComponent); } @@ -225,8 +227,8 @@ export class NzModalService { confirm(props: ConfigInterface): NzModalSubject { const config = Object.assign({ confirmType: 'confirm', - okText : '确 定', - cancelText : '取 消' + okText : this._locale.translate('Modal.okText'), + cancelText : this._locale.translate('Modal.cancelText') }, props); return this._openConfirm(config); } diff --git a/src/components/ng-zorro-antd.module.ts b/src/components/ng-zorro-antd.module.ts index 2703a3c312d..d5e5bad1ce3 100644 --- a/src/components/ng-zorro-antd.module.ts +++ b/src/components/ng-zorro-antd.module.ts @@ -6,6 +6,9 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; // Modules +import { LoggerModule } from './util/logger'; +import { NzLocaleModule } from './locale'; +// import { NzLocaleProviderModule } from './locale-provider'; import { NzGridModule } from './grid/nz-grid.module'; import { NzButtonModule } from './button/nz-button.module'; import { NzAlertModule } from './alert/nz-alert.module'; @@ -64,6 +67,12 @@ import { NZ_ROOT_CONFIG, NzRootConfig } from './root/nz-root-config' // | Exports // --------------------------------------------------------- +// Mixes +export * from './locale'; +// export { NZ_DEFAULT_LOCALE } from './locale-provider'; +// export * from './locale-provider/locale'; +export { NZ_LOGGER_STATE } from './util/logger'; + // Modules export { NzGridModule } from './grid/nz-grid.module'; export { NzButtonModule } from './button/nz-button.module'; @@ -231,6 +240,9 @@ export { NZ_ROOT_CONFIG, NzRootConfig } from './root/nz-root-config'; @NgModule({ exports: [ + LoggerModule, + NzLocaleModule, + // NzLocaleProviderModule, NzButtonModule, NzAlertModule, NzBadgeModule, diff --git a/src/components/pagination/nz-pagination.component.ts b/src/components/pagination/nz-pagination.component.ts index 511d8fa997c..3a320c3c773 100644 --- a/src/components/pagination/nz-pagination.component.ts +++ b/src/components/pagination/nz-pagination.component.ts @@ -13,7 +13,7 @@ import { template : `
  • @@ -23,7 +23,7 @@ import { ／{{_lastIndex}}
  • @@ -31,23 +31,23 @@ import {
    - 共 {{_total}} 条 + {{ 'Pagination.totalItems' | nzTranslate: { total: _total } }}
  • {{_firstIndex}}
  • @@ -62,14 +62,14 @@ import { {{page.index}}
  • {{_lastIndex}}
  • @@ -92,18 +92,18 @@ import { (ngModelChange)="_pageSizeChange($event)">
    - 跳至页 + {{ 'Pagination.jumpTo' | nzTranslate }}{{ 'Pagination.page' | nzTranslate }}
`, diff --git a/src/components/pagination/nz-pagination.module.ts b/src/components/pagination/nz-pagination.module.ts index e880d4b3acd..ebc566cfed6 100644 --- a/src/components/pagination/nz-pagination.module.ts +++ b/src/components/pagination/nz-pagination.module.ts @@ -3,11 +3,12 @@ import { NzSelectModule } from '../select/nz-select.module'; import { NzPaginationComponent } from './nz-pagination.component'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; +import { NzLocaleModule } from '../locale'; @NgModule({ declarations: [ NzPaginationComponent ], exports : [ NzPaginationComponent ], - imports : [ CommonModule, FormsModule, NzSelectModule ] + imports : [ CommonModule, FormsModule, NzSelectModule, NzLocaleModule ] }) export class NzPaginationModule { diff --git a/src/components/popconfirm/nz-popconfirm.component.ts b/src/components/popconfirm/nz-popconfirm.component.ts index 2cf52138617..dfffea46c03 100644 --- a/src/components/popconfirm/nz-popconfirm.component.ts +++ b/src/components/popconfirm/nz-popconfirm.component.ts @@ -4,11 +4,14 @@ import { Input, Output, EventEmitter, - ContentChild + ContentChild, + Renderer2, + ChangeDetectorRef, } from '@angular/core'; import { NzPopconfirmDirective } from './nz-popconfirm.directive'; import { FadeAnimation } from '../core/animation/fade-animations'; import { NzToolTipComponent } from '../tooltip/nz-tooltip.component'; +import { NzLocaleService } from '../locale'; @Component({ selector : 'nz-popconfirm', @@ -64,8 +67,8 @@ export class NzPopconfirmComponent extends NzToolTipComponent { _hasBackdrop = true; _condition = false; @Input() nzContent; - @Input() nzOkText = '确定'; - @Input() nzCancelText = '取消'; + @Input() nzOkText = this._locale.translate('Modal.okText'); + @Input() nzCancelText = this._locale.translate('Modal.cancelText'); @Input() set nzCondition(value) { this._condition = value; @@ -79,6 +82,9 @@ export class NzPopconfirmComponent extends NzToolTipComponent { @Output() nzOnConfirm: EventEmitter = new EventEmitter(); @ContentChild(NzPopconfirmDirective) nzOrigin; + constructor(renderer: Renderer2, cdr: ChangeDetectorRef, private _locale: NzLocaleService) { + super(renderer, cdr); + } show(): void { if (!this._condition) { diff --git a/src/components/popconfirm/nz-popconfirm.module.ts b/src/components/popconfirm/nz-popconfirm.module.ts index f0f8ca674aa..4708c59566e 100644 --- a/src/components/popconfirm/nz-popconfirm.module.ts +++ b/src/components/popconfirm/nz-popconfirm.module.ts @@ -4,12 +4,12 @@ import { NzPopconfirmDirective } from './nz-popconfirm.directive'; import { CommonModule } from '@angular/common'; import { NzButtonModule } from '../button/nz-button.module'; import { OverlayModule } from '@angular/cdk/overlay'; - +import { NzLocaleModule } from '../locale'; @NgModule({ declarations: [ NzPopconfirmComponent, NzPopconfirmDirective ], exports : [ NzPopconfirmComponent, NzPopconfirmDirective ], - imports : [ CommonModule, NzButtonModule, OverlayModule ] + imports : [ CommonModule, NzButtonModule, OverlayModule, NzLocaleModule ] }) export class NzPopconfirmModule { diff --git a/src/components/select/nz-select.component.ts b/src/components/select/nz-select.component.ts index 06ad1d97292..0aa44f81f43 100644 --- a/src/components/select/nz-select.component.ts +++ b/src/components/select/nz-select.component.ts @@ -15,7 +15,8 @@ import { ElementRef, Renderer2, ViewChild, - forwardRef + forwardRef, + Inject, } from '@angular/core'; import { DOWN_ARROW, ENTER, TAB } from '@angular/cdk/keycodes'; import { NzOptionComponent } from './nz-option.component'; @@ -23,6 +24,7 @@ import { NzOptionPipe } from './nz-option.pipe'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { DropDownAnimation } from '../core/animation/dropdown-animations'; import { TagAnimation } from '../core/animation/tag-animations'; +import { NzLocaleService } from '../locale'; @Component({ selector : 'nz-select', @@ -156,7 +158,7 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent _size: string; _value: Array | string; _placeholder = 'Placeholder'; - _notFoundContent = 'Not found'; + _notFoundContent = this._locale.translate('Select.notFoundContent'); _isOpen = false; _disabled = false; _showSearch = false; @@ -717,7 +719,7 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent this.nzDisabled = isDisabled; } - constructor(private _elementRef: ElementRef, private _renderer: Renderer2) { + constructor(private _elementRef: ElementRef, private _renderer: Renderer2, private _locale: NzLocaleService) { this._el = this._elementRef.nativeElement; } diff --git a/src/components/select/nz-select.module.ts b/src/components/select/nz-select.module.ts index ee6e303d6fa..1bb35a3820d 100644 --- a/src/components/select/nz-select.module.ts +++ b/src/components/select/nz-select.module.ts @@ -5,9 +5,10 @@ import { OverlayModule } from '@angular/cdk/overlay'; import { NzSelectComponent } from './nz-select.component'; import { NzOptionComponent } from './nz-option.component'; import { NzOptionPipe } from './nz-option.pipe'; +import { NzLocaleModule } from '../locale'; @NgModule({ - imports : [ CommonModule, FormsModule, OverlayModule ], + imports : [ CommonModule, FormsModule, OverlayModule, NzLocaleModule ], declarations: [ NzOptionPipe, NzOptionComponent, NzSelectComponent ], exports : [ NzOptionPipe, NzOptionComponent, NzSelectComponent ] }) diff --git a/src/components/table/nz-table.component.ts b/src/components/table/nz-table.component.ts index f3caea3d503..919fccb5a6d 100644 --- a/src/components/table/nz-table.component.ts +++ b/src/components/table/nz-table.component.ts @@ -52,7 +52,7 @@ import { NzThDirective } from './nz-th.directive';
- 没有数据 + {{ 'Table.emptyText' | nzTranslate }}
diff --git a/src/components/table/nz-table.module.ts b/src/components/table/nz-table.module.ts index f239722cc25..9a89f772727 100644 --- a/src/components/table/nz-table.module.ts +++ b/src/components/table/nz-table.module.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { NzTableComponent } from './nz-table.component'; import { NzThDirective } from './nz-th.directive'; import { NzTdDirective } from './nz-td.directive'; @@ -11,14 +12,13 @@ import { NzTbodyTrDirective } from './nz-tbody-tr.directive'; import { NzTableDividerDirective } from './nz-table-divider.directive'; import { NzTableSortComponent } from './nz-table-sort.component'; import { NzSpinModule } from '../spin/nz-spin.module'; - import { NzPaginationModule } from '../pagination/nz-pagination.module'; -import { CommonModule } from '@angular/common'; +import { NzLocaleModule } from '../locale'; @NgModule({ declarations: [ NzRowIndentComponent, NzRowExpandIconComponent, NzTableFilterComponent, NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ], exports : [ NzRowIndentComponent, NzRowExpandIconComponent, NzTableFilterComponent, NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ], - imports : [ CommonModule, NzPaginationModule, NzSpinModule ] + imports : [ CommonModule, NzPaginationModule, NzSpinModule, NzLocaleModule ] }) export class NzTableModule { diff --git a/src/components/time-picker/nz-timepicker-inner.component.ts b/src/components/time-picker/nz-timepicker-inner.component.ts index 2802f46bb0b..2f6b1402b52 100644 --- a/src/components/time-picker/nz-timepicker-inner.component.ts +++ b/src/components/time-picker/nz-timepicker-inner.component.ts @@ -10,6 +10,7 @@ import { import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import * as moment from 'moment'; import { DropDownAnimation } from '../core/animation/dropdown-animations'; +import { NzLocaleService } from '../locale'; export interface TimeUnitInterface { index: number; @@ -153,7 +154,7 @@ export class NzTimePickerInnerComponent implements OnInit, ControlValueAccessor return this._hideDisabledOptions; } - @Input() nzPlaceHolder = '请选择时间'; + @Input() nzPlaceHolder = this._locale.translate('DateTime.chooseTimePlease'); @Input() nzSize: 'small' | 'large' | 'default' = 'default'; @Input() nzDisabledHours; @Input() nzDisabledMinutes; @@ -343,7 +344,7 @@ export class NzTimePickerInnerComponent implements OnInit, ControlValueAccessor this.nzDisabled = isDisabled; } - constructor(public _cdr: ChangeDetectorRef) { + constructor(public _cdr: ChangeDetectorRef, private _locale: NzLocaleService) { } ngOnInit() { diff --git a/src/components/time-picker/nz-timepicker.component.ts b/src/components/time-picker/nz-timepicker.component.ts index 1843ff1fcd2..d5c766d2aae 100644 --- a/src/components/time-picker/nz-timepicker.component.ts +++ b/src/components/time-picker/nz-timepicker.component.ts @@ -57,7 +57,7 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay'; [value]="_value|nzDate:_format" (blur)="_manualChangeInput(inputTimeInstance)" (keydown.Enter)="_manualChangeInput(inputTimeInstance)"> - +
('nz-logger-state'); // Whether print the log + +export function LOGGER_SERVICE_PROVIDER_FACTORY(exist, loggerState) { return exist || new LoggerService(loggerState); } + +export const LOGGER_SERVICE_PROVIDER: Provider = { + provide: LoggerService, + useFactory: LOGGER_SERVICE_PROVIDER_FACTORY, + deps: [ [ new Optional(), new SkipSelf(), LoggerService ], NZ_LOGGER_STATE ] +}; diff --git a/src/showcase/app.module.ts b/src/showcase/app.module.ts index bbe3e022b35..28846503184 100644 --- a/src/showcase/app.module.ts +++ b/src/showcase/app.module.ts @@ -10,6 +10,9 @@ import { NgZorroAntdModule, NZ_MESSAGE_CONFIG, NZ_NOTIFICATION_CONFIG } from '.. import { NzCodeBoxModule } from './share/nz-codebox/nz-codebox.module'; import { NzHighlightModule } from './share/nz-highlight/nz-highlight.module'; +import { NZ_LOGGER_STATE } from '../../index.showcase'; +import { NZ_LOCALE, enUS } from '../../index.showcase'; + @NgModule({ declarations: [ AppComponent, @@ -25,8 +28,10 @@ import { NzHighlightModule } from './share/nz-highlight/nz-highlight.module'; RouterModule.forRoot(routes, { useHash: true, preloadingStrategy: PreloadAllModules }) ], providers : [ + { provide: NZ_LOGGER_STATE, useValue: true }, { provide: NZ_MESSAGE_CONFIG, useValue: { nzDuration: 3000 } }, { provide: NZ_NOTIFICATION_CONFIG, useValue: { nzTop: '20px' } }, + { provide: NZ_LOCALE, useValue: enUS }, Title, ], bootstrap : [ AppComponent ] diff --git a/src/showcase/nz-demo-button/nz-demo-button.html b/src/showcase/nz-demo-button/nz-demo-button.html index a69c8cb6b20..2b116d3e542 100644 --- a/src/showcase/nz-demo-button/nz-demo-button.html +++ b/src/showcase/nz-demo-button/nz-demo-button.html @@ -1,7 +1,7 @@

Button 按钮

按钮用于开始一个即时操作。

-

何时使用 +

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

diff --git a/src/showcase/nz-demo-locale/README.md b/src/showcase/nz-demo-locale/README.md new file mode 100644 index 00000000000..f16ad30bf29 --- /dev/null +++ b/src/showcase/nz-demo-locale/README.md @@ -0,0 +1,26 @@ +为组件内建文案提供统一的国际化支持。 + +## 使用 + +`ng-zorro`中采用全局配置方式来设置当前所使用的语言（默认将采用中文`zh-CN`），只需要在您应用的根模块（如:`AppModule`）中按如下配置即可 __全局生效__。 + +```typescript +import { NZ_LOCALE, enUS } from '../../index.showcase'; + +@NgModule({ + ... + imports : [ NgZorroAntdModule.forRoot() ], + providers : [ { provide: NZ_LOCALE, useValue: enUS } ], // 这里设置当前全局使用的语言包 +}) +export class AppModule { } +``` + +我们目前提供了英语，中文，其他语言将在后续版本中添加，所有语言包可以在 [这里](https://github.com/NG-ZORRO/ng-zorro-antd/tree/master/src/components/locale/locales) 找到。 + +#### 增加语言包 + +如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/NG-ZORRO/ng-zorro-antd/tree/master/src/components/locale/locales/en-US.ts) 的基础上创建一个新的语言包，并给我们 Pull Request。 + +#### 其他国际化需求 + +本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用Angular官方的 [国际化方案](https://angular.io/guide/i18n)（Angular-cli下使用可参考 [这里](https://github.com/angular/angular-cli/wiki/xi18n)） diff --git a/src/showcase/nz-demo-locale/nz-demo-locale-all.component.ts b/src/showcase/nz-demo-locale/nz-demo-locale-all.component.ts new file mode 100644 index 00000000000..c2b17a6fc80 --- /dev/null +++ b/src/showcase/nz-demo-locale/nz-demo-locale-all.component.ts @@ -0,0 +1,131 @@ +import { Component, OnInit } from '@angular/core'; +import * as moment from 'moment'; +import { zhCN, enUS, NzModalService, NzLocaleService } from '../../../index.showcase'; + +@Component({ + selector: 'nz-demo-locale-all', + template: ` +
+
+ Change locale of components: + + + + +
+ + + + + + + + + + + +
+ `, +}) +export class NzDemoLocaleAllComponent implements OnInit { + zhCN = zhCN; + enUS = enUS; + + _locale; + get locale() { + return this._locale; + } + set locale(locale) { + this._locale = locale; + /* Switch locale manually (DEMO ONLY) */ + moment.locale(locale.locale); + this._localeService.setLocale(locale); + } + + constructor(private _localeService: NzLocaleService) {} + + ngOnInit() { + this.locale = enUS; + } +} + +@Component({ + selector: 'nz-demo-locale-all-page', + template: ` +
+
+ +
+
+ + + + + + +
+
+ + + + + Click to confirm + +
+ +
+ + + + Name + Age + + + + + {{data.name}} + {{data.age}} + + + +
+
+ `, + styles: [` + .locale-components { + border-top: 1px solid #d9d9d9; + padding-top: 16px; + } + .example { + margin: 16px 0; + } + .example > * { + margin-right: 8px; + } + `], +}) + +export class NzDemoLocaleAllPageComponent { + constructor(private _modal: NzModalService) {} + + showModal() { + this._modal.open({ + title: 'Locale Modal', + content: 'Locale Modal', + }); + } + + showInfo() { + this._modal.info({ + title: 'some info', + content: 'some info', + }); + } + + showConfirm() { + this._modal.confirm({ + title: 'some info', + content: 'some info', + }); + } +} diff --git a/src/showcase/nz-demo-locale/nz-demo-locale.component.html b/src/showcase/nz-demo-locale/nz-demo-locale.component.html new file mode 100644 index 00000000000..6cd41b2f2f3 --- /dev/null +++ b/src/showcase/nz-demo-locale/nz-demo-locale.component.html @@ -0,0 +1,32 @@ +
+
+

Locale 国际化

+
+ +
+

+ 代码演示 + +

+
+
+ +
+ + +
+

此处列出 Ng-Zorro 中需要国际化支持的组件，你可以在演示里切换语言。涉及时间的组件请注意时区设置。

+
+ +
+
+
diff --git a/src/showcase/nz-demo-locale/nz-demo-locale.component.ts b/src/showcase/nz-demo-locale/nz-demo-locale.component.ts new file mode 100644 index 00000000000..8fc063fb191 --- /dev/null +++ b/src/showcase/nz-demo-locale/nz-demo-locale.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-locale', + templateUrl: 'nz-demo-locale.component.html' +}) + +export class NzDemoLocaleComponent implements OnInit { + markdownContent = require('!!raw-loader!./README.md'); + + NzDemoLocaleAllCode = require('!!raw-loader!./nz-demo-locale-all.component'); + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/showcase/nz-demo-locale/nz-demo-locale.module.ts b/src/showcase/nz-demo-locale/nz-demo-locale.module.ts new file mode 100644 index 00000000000..23fec801e02 --- /dev/null +++ b/src/showcase/nz-demo-locale/nz-demo-locale.module.ts @@ -0,0 +1,29 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; +import { NzMarkdownModule } from '../share/nz-markdown/nz-markdown.module'; +import { NgZorroAntdModule } from '../../../index.showcase'; +import { NzCodeBoxModule } from '../share/nz-codebox/nz-codebox.module'; + +import { NzDemoLocaleComponent } from './nz-demo-locale.component'; +import { NzDemoLocaleAllComponent, NzDemoLocaleAllPageComponent } from './nz-demo-locale-all.component'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + RouterModule.forChild([ + { path: '', component: NzDemoLocaleComponent }, + ]), + NzMarkdownModule, + NgZorroAntdModule, + NzCodeBoxModule, + ], + declarations: [ + NzDemoLocaleComponent, + NzDemoLocaleAllComponent, + NzDemoLocaleAllPageComponent, + ], +}) +export class NzDemoLocaleModule { } diff --git a/src/showcase/nz-demo-modal/nz-demo-modal.component.ts b/src/showcase/nz-demo-modal/nz-demo-modal.component.ts index 72dbc0b8d90..2a39bfa7ea4 100644 --- a/src/showcase/nz-demo-modal/nz-demo-modal.component.ts +++ b/src/showcase/nz-demo-modal/nz-demo-modal.component.ts @@ -3,7 +3,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; @Component({ selector : 'nz-demo-modal', encapsulation: ViewEncapsulation.None, - templateUrl : './nz-demo-modal.html' + templateUrl : './nz-demo-modal.html', }) export class NzDemoModalComponent { NzDemoModalBasicCode = require('!!raw-loader!./nz-demo-modal-basic.component'); diff --git a/src/showcase/nz-intro-i18n/README.md b/src/showcase/nz-intro-i18n/README.md new file mode 100644 index 00000000000..34b1aead7b9 --- /dev/null +++ b/src/showcase/nz-intro-i18n/README.md @@ -0,0 +1,29 @@ +国际化 +=== +`ng-zorro`目前的默认文案是中文，如果需要使用英文或其他语言，可以参考下面的方案。 + +## NZ_LOCALE 配置 + +`ng-zorro`提供了一个配置型token `NZ_LOCALE` 用于全局配置国际化文案。 + +```ts +import { NZ_LOCALE, enUS } from '../../index.showcase'; + +@NgModule({ + ... + imports : [ NgZorroAntdModule.forRoot() ], + providers : [ { provide: NZ_LOCALE, useValue: enUS } ], // 这里设置当前全局使用的语言包 +}) +export class AppModule { } +``` + +注意：实际语言包文件名可能是 `en-US.ts` 格式，使用时对应导出为 `enUS`（去掉减号） + +目前支持以下语言： + +| 语言 | 文件名 | +| --- | --- | +| 简体中文(大陆) | zh-CN | +| 美式英语 | en-US | + +具体的使用方法和新语言包贡献方式请参考 [Locale](#/other/locale) 文档。 diff --git a/src/showcase/nz-intro-i18n/nz-intro-i18n.component.html b/src/showcase/nz-intro-i18n/nz-intro-i18n.component.html new file mode 100644 index 00000000000..7083b78f9f6 --- /dev/null +++ b/src/showcase/nz-intro-i18n/nz-intro-i18n.component.html @@ -0,0 +1 @@ + diff --git a/src/showcase/nz-intro-i18n/nz-intro-i18n.component.ts b/src/showcase/nz-intro-i18n/nz-intro-i18n.component.ts new file mode 100644 index 00000000000..20c197298aa --- /dev/null +++ b/src/showcase/nz-intro-i18n/nz-intro-i18n.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-intro-i18n', + templateUrl: 'nz-intro-i18n.component.html' +}) + +export class NzIntroI18nComponent implements OnInit { + markdownContent = require('!!raw-loader!./README.md'); + + constructor() { } + + ngOnInit() { } +} diff --git a/src/showcase/nz-intro-i18n/nz-intro-i18n.module.ts b/src/showcase/nz-intro-i18n/nz-intro-i18n.module.ts new file mode 100644 index 00000000000..6e20bd634b1 --- /dev/null +++ b/src/showcase/nz-intro-i18n/nz-intro-i18n.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { NzMarkdownModule } from '../share/nz-markdown/nz-markdown.module'; + +import { NzIntroI18nComponent } from './nz-intro-i18n.component'; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { path: '', component: NzIntroI18nComponent } + ]), + NzMarkdownModule, + ], + exports: [], + declarations: [NzIntroI18nComponent], + providers: [], +}) +export class NzIntroI18nModule { } diff --git a/src/showcase/nz-intro-index/README.md b/src/showcase/nz-intro-index/README.md index 41c63dc1d4b..d02b7994c2e 100644 --- a/src/showcase/nz-intro-index/README.md +++ b/src/showcase/nz-intro-index/README.md @@ -1,6 +1,6 @@ NG-ZORRO [![GitHub stars](https://img.shields.io/github/stars/NG-ZORRO/ng-zorro-antd.svg?style=social&label=Star)](https://github.com/NG-ZORRO/ng-zorro-antd) === -这里是 Ant Design 的 Angular`^4.0.0` 实现，开发和服务于企业级后台产品。 +这里是 Ant Design 的 Angular`^4.4.3` 实现，开发和服务于企业级后台产品。
@@ -26,7 +26,7 @@ NG-ZORRO [![GitHub stars](https://img.shields.io/github/stars/NG-ZORRO/ng-zorro- ## 兼容版本 -* 当前支持 Angular`^4.0.0` 版本 +* 当前支持 Angular`^4.4.3` 版本 ## 安装 diff --git a/src/showcase/router.ts b/src/showcase/router.ts index 4c787826fae..44ff72bc393 100644 --- a/src/showcase/router.ts +++ b/src/showcase/router.ts @@ -2,18 +2,23 @@ export const ROUTER_LIST = { 'intro' : [ { 'path' : 'docs/angular/introduce', - 'loadChildren': './nz-intro-index/nz-intro.module#NzIntroModule', + // 'loadChildren': './nz-intro-index/nz-intro.module#NzIntroModule', 'label' : 'Ant Design of Angular' }, { 'path' : 'docs/angular/getting-started', - 'loadChildren': './nz-intro-getting-started/nz-intro-get-started.module#NzIntroGetStartedModule', + // 'loadChildren': './nz-intro-getting-started/nz-intro-get-started.module#NzIntroGetStartedModule', 'label' : '快速上手' }, { 'path' : 'changelog', - 'loadChildren': './nz-intro-changelog/nz-intro-changelog.module#NzIntroChangeLogModule', + // 'loadChildren': './nz-intro-changelog/nz-intro-changelog.module#NzIntroChangeLogModule', 'label' : '更新日志' + }, + { + 'path' : 'i18n', + // 'loadChildren': './nz-intro-i18n/nz-intro-i18n.module#NzIntroI18nModule', + 'label' : '国际化' } ], 'components': [ @@ -23,13 +28,13 @@ export const ROUTER_LIST = { { 'label' : 'Button', 'path' : 'components/button', - 'loadChildren': './nz-demo-button/nz-demo-button.module#NzDemoButtonModule', + // 'loadChildren': './nz-demo-button/nz-demo-button.module#NzDemoButtonModule', 'zh' : '按钮' }, { 'label' : 'Icon', 'path' : 'components/icon', - 'loadChildren': './nz-demo-icon/nz-demo-icon.module#NzDemoIconModule', + // 'loadChildren': './nz-demo-icon/nz-demo-icon.module#NzDemoIconModule', 'zh' : '图标' } ] @@ -40,13 +45,13 @@ export const ROUTER_LIST = { { 'label' : 'Grid', 'path' : 'components/grid', - 'loadChildren': './nz-demo-grid/nz-demo-grid.module#NzDemoGridModule', + // 'loadChildren': './nz-demo-grid/nz-demo-grid.module#NzDemoGridModule', 'zh' : '栅格' }, { 'label' : 'Layout', 'path' : 'components/layout', - 'loadChildren': './nz-demo-layout/nz-demo-layout.module#NzDemoLayoutModule', + // 'loadChildren': './nz-demo-layout/nz-demo-layout.module#NzDemoLayoutModule', 'zh' : '布局' } ] @@ -57,37 +62,37 @@ export const ROUTER_LIST = { { 'label' : 'Affix', 'path' : 'components/affix', - 'loadChildren': './nz-demo-affix/nz-demo-affix.module#NzDemoAffixModule', + // 'loadChildren': './nz-demo-affix/nz-demo-affix.module#NzDemoAffixModule', 'zh' : '固钉' }, { 'label' : 'Breadcrumb', 'path' : 'components/breadcrumb', - 'loadChildren': './nz-demo-breadcrumb/nz-demo-breadcrumb.module#NzDemoBreadCrumbModule', + // 'loadChildren': './nz-demo-breadcrumb/nz-demo-breadcrumb.module#NzDemoBreadCrumbModule', 'zh' : '面包屑' }, { 'label' : 'Dropdown', 'path' : 'components/dropdown', - 'loadChildren': './nz-demo-dropdown/nz-demo-dropdown.module#NzDemoDropDownModule', + // 'loadChildren': './nz-demo-dropdown/nz-demo-dropdown.module#NzDemoDropDownModule', 'zh' : '下拉菜单' }, { 'label' : 'Menu', 'path' : 'components/menu', - 'loadChildren': './nz-demo-menu/nz-demo-menu.module#NzDemoMenuModule', + // 'loadChildren': './nz-demo-menu/nz-demo-menu.module#NzDemoMenuModule', 'zh' : '菜单' }, { 'label' : 'Pagination', 'path' : 'components/pagination', - 'loadChildren': './nz-demo-pagination/nz-demo-pagination.module#NzDemoPaginationModule', + // 'loadChildren': './nz-demo-pagination/nz-demo-pagination.module#NzDemoPaginationModule', 'zh' : '分页' }, { 'label' : 'Steps', 'path' : 'components/steps', - 'loadChildren': './nz-demo-steps/nz-demo-steps.module#NzDemoStepsModule', + // 'loadChildren': './nz-demo-steps/nz-demo-steps.module#NzDemoStepsModule', 'zh' : '步骤条' } ] @@ -98,73 +103,73 @@ export const ROUTER_LIST = { { 'label' : 'Cascader', 'path' : 'components/cascader', - 'loadChildren': './nz-demo-cascader/nz-demo-cascader.module#NzDemoCascaderModule', + // 'loadChildren': './nz-demo-cascader/nz-demo-cascader.module#NzDemoCascaderModule', 'zh' : '级联选择' }, { 'label' : 'Checkbox', 'path' : 'components/checkbox', - 'loadChildren': './nz-demo-checkbox/nz-demo-checkbox.module#NzDemoCheckboxModule', + // 'loadChildren': './nz-demo-checkbox/nz-demo-checkbox.module#NzDemoCheckboxModule', 'zh' : '多选框' }, { 'label' : 'DatePicker', 'path' : 'components/date-picker', - 'loadChildren': './nz-demo-datepicker/nz-demo-datepicker.module#NzDemoDatePickerModule', + // 'loadChildren': './nz-demo-datepicker/nz-demo-datepicker.module#NzDemoDatePickerModule', 'zh' : '日期选择框' }, { 'label' : 'Form', 'path' : 'components/form', - 'loadChildren': './nz-demo-form/nz-demo-form.module#NzDemoFormModule', + // 'loadChildren': './nz-demo-form/nz-demo-form.module#NzDemoFormModule', 'zh' : '表单' }, { 'label' : 'InputNumber', 'path' : 'components/input-number', - 'loadChildren': './nz-demo-input-number/nz-demo-input-number.module#NzDemoInputNumberModule', + // 'loadChildren': './nz-demo-input-number/nz-demo-input-number.module#NzDemoInputNumberModule', 'zh' : '数字输入框' }, { 'label' : 'Input', 'path' : 'components/input', - 'loadChildren': './nz-demo-input/nz-demo-input.module#NzDemoInputModule', + // 'loadChildren': './nz-demo-input/nz-demo-input.module#NzDemoInputModule', 'zh' : '输入框' }, { 'label' : 'Rate', 'path' : 'components/rate', - 'loadChildren': './nz-demo-rate/nz-demo-rate.module#NzDemoRateModule', + // 'loadChildren': './nz-demo-rate/nz-demo-rate.module#NzDemoRateModule', 'zh' : '评分' }, { 'label' : 'Radio', 'path' : 'components/radio', - 'loadChildren': './nz-demo-radio/nz-demo-radio.module#NzDemoRadioModule', + // 'loadChildren': './nz-demo-radio/nz-demo-radio.module#NzDemoRadioModule', 'zh' : '单选框' }, { 'label' : 'Select', 'path' : 'components/select', - 'loadChildren': './nz-demo-select/nz-demo-select.module#NzDemoSelectModule', + // 'loadChildren': './nz-demo-select/nz-demo-select.module#NzDemoSelectModule', 'zh' : '选择器' }, { 'label' : 'Slider', 'path' : 'components/slider', - 'loadChildren': './nz-demo-slider/nz-demo-slider.module#NzDemoSliderModule', + // 'loadChildren': './nz-demo-slider/nz-demo-slider.module#NzDemoSliderModule', 'zh' : '滑动输入条' }, { 'label' : 'Switch', 'path' : 'components/switch', - 'loadChildren': './nz-demo-switch/nz-demo-switch.module#NzDemoSwitchModule', + // 'loadChildren': './nz-demo-switch/nz-demo-switch.module#NzDemoSwitchModule', 'zh' : '开关' }, { 'label' : 'TimePicker', 'path' : 'components/time-picker', - 'loadChildren': './nz-demo-timepicker/nz-demo-timepicker.module#NzDemoTimePickerModule', + // 'loadChildren': './nz-demo-timepicker/nz-demo-timepicker.module#NzDemoTimePickerModule', 'zh' : '时间选择框' } ] @@ -175,73 +180,73 @@ export const ROUTER_LIST = { { 'label' : 'Avatar', 'path' : 'components/avatar', - 'loadChildren': './nz-demo-avatar/nz-demo-avatar.module#NzDemoAvatarModule', + // 'loadChildren': './nz-demo-avatar/nz-demo-avatar.module#NzDemoAvatarModule', 'zh' : '头像' }, { 'label' : 'Badge', 'path' : 'components/badge', - 'loadChildren': './nz-demo-badge/nz-demo-badge.module#NzDemoBadgeModule', + // 'loadChildren': './nz-demo-badge/nz-demo-badge.module#NzDemoBadgeModule', 'zh' : '徽标数' }, { 'label' : 'Calendar', 'path' : 'components/calendar', - 'loadChildren': './nz-demo-calendar/nz-demo-calendar.module#NzDemoCalendarModule', + // 'loadChildren': './nz-demo-calendar/nz-demo-calendar.module#NzDemoCalendarModule', 'zh' : '日历' }, { 'label' : 'Card', 'path' : 'components/card', - 'loadChildren': './nz-demo-card/nz-demo-card.module#NzDemoCardModule', + // 'loadChildren': './nz-demo-card/nz-demo-card.module#NzDemoCardModule', 'zh' : '卡片' }, { 'label' : 'Carousel', 'path' : 'components/carousel', - 'loadChildren': './nz-demo-carousel/nz-demo-carousel.module#NzDemoCarouselModule', + // 'loadChildren': './nz-demo-carousel/nz-demo-carousel.module#NzDemoCarouselModule', 'zh' : '走马灯' }, { 'label' : 'Collapse', 'path' : 'components/collapse', - 'loadChildren': './nz-demo-collapse/nz-demo-collapse.module#NzDemoCollapseModule', + // 'loadChildren': './nz-demo-collapse/nz-demo-collapse.module#NzDemoCollapseModule', 'zh' : '折叠面板' }, { 'label' : 'Popover', 'path' : 'components/popover', - 'loadChildren': './nz-demo-popover/nz-demo-popover.module#NzDemoPopoverModule', + // 'loadChildren': './nz-demo-popover/nz-demo-popover.module#NzDemoPopoverModule', 'zh' : '气泡卡片' }, { 'label' : 'Tooltip', 'path' : 'components/tooltip', - 'loadChildren': './nz-demo-tooltip/nz-demo-tooltip.module#NzDemoTooltipModule', + // 'loadChildren': './nz-demo-tooltip/nz-demo-tooltip.module#NzDemoTooltipModule', 'zh' : '文字提示' }, { 'label' : 'Table', 'path' : 'components/table', - 'loadChildren': './nz-demo-table/nz-demo-table.module#NzDemoTableModule', + // 'loadChildren': './nz-demo-table/nz-demo-table.module#NzDemoTableModule', 'zh' : '表格' }, { 'label' : 'Tabs', 'path' : 'components/tabs', - 'loadChildren': './nz-demo-tabs/nz-demo-tabs.module#NzDemoTabsModule', + // 'loadChildren': './nz-demo-tabs/nz-demo-tabs.module#NzDemoTabsModule', 'zh' : '标签页' }, { 'label' : 'Tag', 'path' : 'components/tag', - 'loadChildren': './nz-demo-tag/nz-demo-tag.module#NzDemoTagModule', + // 'loadChildren': './nz-demo-tag/nz-demo-tag.module#NzDemoTagModule', 'zh' : '标签' }, { 'label' : 'Timeline', 'path' : 'components/timeline', - 'loadChildren': './nz-demo-timeline/nz-demo-timeline.module#NzDemoTimelineModule', + // 'loadChildren': './nz-demo-timeline/nz-demo-timeline.module#NzDemoTimelineModule', 'zh' : '时间轴' } ] @@ -252,43 +257,43 @@ export const ROUTER_LIST = { { 'label' : 'Alert', 'path' : 'components/alert', - 'loadChildren': './nz-demo-alert/nz-demo-alert.module#NzDemoAlertModule', + // 'loadChildren': './nz-demo-alert/nz-demo-alert.module#NzDemoAlertModule', 'zh' : '警告提示' }, { 'label' : 'Message', 'path' : 'components/message', - 'loadChildren': './nz-demo-message/nz-demo-message.module#NzDemoMessageModule', + // 'loadChildren': './nz-demo-message/nz-demo-message.module#NzDemoMessageModule', 'zh' : '全局提示' }, { 'label' : 'Modal', 'path' : 'components/modal', - 'loadChildren': './nz-demo-modal/nz-demo-modal.module#NzDemoModalModule', + // 'loadChildren': './nz-demo-modal/nz-demo-modal.module#NzDemoModalModule', 'zh' : '对话框' }, { 'label' : 'Notification', 'path' : 'components/notification', - 'loadChildren': './nz-demo-notification/nz-demo-notification.module#NzDemoNotificationModule', + // 'loadChildren': './nz-demo-notification/nz-demo-notification.module#NzDemoNotificationModule', 'zh' : '通知提醒框' }, { 'label' : 'Progress', 'path' : 'components/progress', - 'loadChildren': './nz-demo-progress/nz-demo-progress.module#NzDemoProgressModule', + // 'loadChildren': './nz-demo-progress/nz-demo-progress.module#NzDemoProgressModule', 'zh' : '进度条' }, { 'label' : 'Popconfirm', 'path' : 'components/popconfirm', - 'loadChildren': './nz-demo-popconfirm/nz-demo-popconfirm.module#NzDemoPopconfirmModule', + // 'loadChildren': './nz-demo-popconfirm/nz-demo-popconfirm.module#NzDemoPopconfirmModule', 'zh' : '气泡确认框' }, { 'label' : 'Spin', 'path' : 'components/spin', - 'loadChildren': './nz-demo-spin/nz-demo-spin.module#NzDemoSpinModule', + // 'loadChildren': './nz-demo-spin/nz-demo-spin.module#NzDemoSpinModule', 'zh' : '加载中' } ] @@ -299,19 +304,25 @@ export const ROUTER_LIST = { { 'label' : 'Anchor', 'path' : 'other/anchor', - 'loadChildren': './nz-demo-anchor/nz-demo-anchor.module#NzDemoAnchorModule', + // 'loadChildren': './nz-demo-anchor/nz-demo-anchor.module#NzDemoAnchorModule', 'zh' : '锚点' }, { 'label' : 'BackTop', 'path' : 'other/back-top', - 'loadChildren': './nz-demo-back-top/nz-demo-back-top.module#NzDemoBackTopModule', + // 'loadChildren': './nz-demo-back-top/nz-demo-back-top.module#NzDemoBackTopModule', 'zh' : '回到顶部' + }, + { + 'label' : 'Locale', + 'path' : 'other/locale', + // 'loadChildren': './nz-demo-locale/nz-demo-locale.module#NzDemoLocaleModule', + 'zh' : '国际化' } ] } ] -}; +}; // END - ROUTER_LIST export const INTRO_ROUTES = [ { @@ -325,6 +336,10 @@ export const INTRO_ROUTES = [ { 'path' : 'changelog', 'loadChildren': './nz-intro-changelog/nz-intro-changelog.module#NzIntroChangeLogModule' + }, + { + 'path' : 'i18n', + 'loadChildren': './nz-intro-i18n/nz-intro-i18n.module#NzIntroI18nModule' } ]; export const DEMO_ROUTES = [ @@ -488,6 +503,10 @@ export const DEMO_ROUTES = [ 'path' : 'components/affix', 'loadChildren': './nz-demo-affix/nz-demo-affix.module#NzDemoAffixModule' }, + { + 'path' : 'components/avatar', + 'loadChildren': './nz-demo-avatar/nz-demo-avatar.module#NzDemoAvatarModule' + }, { 'path' : 'other/back-top', 'loadChildren': './nz-demo-back-top/nz-demo-back-top.module#NzDemoBackTopModule' @@ -497,8 +516,8 @@ export const DEMO_ROUTES = [ 'loadChildren': './nz-demo-anchor/nz-demo-anchor.module#NzDemoAnchorModule' }, { - 'path' : 'components/avatar', - 'loadChildren': './nz-demo-avatar/nz-demo-avatar.module#NzDemoAvatarModule' + 'path' : 'other/locale', + 'loadChildren': './nz-demo-locale/nz-demo-locale.module#NzDemoLocaleModule' } ];