在终端先给项目快速创建一个 Ant Design 里的日期选择组件，执行 ng generate 生成 ng-zorro-antd，模板的名字是 date-picker-format ，放在 pages，demo 里面，组件的名字叫 date-picker。

ng g ng-zorro-antd:date-picker-format pages/demo/date-picker

回到项目，打开 Demo 模块的路由模块，添加一条路由，路由的 path 是 date-picker，路由对应的 component 设置成 DatePickerComponent 这个组件。

然后打开 AppComponent 组件的模板文件，在边栏上菜单上添加一个新的项目，复制一份，文字是 Date Picker，地址是 /demo/date-picker 。

预览

回到浏览器预览一下，打开边栏上的 Date Picker ，界面上显示的是一个日期选择组件，用户可以使用这个组件要选择日期。

注意现在这个组件上显示的一些东西是英文的，因为应用现在用的语言就是英文。

回到项目，打开项目的 AppModule 模块，在应用的根模块里配置了一下应用的语言，现在是 en_US，可以换成 zh_CN 试一下。

在上面还得导入 Angular 里的中文语言，导入 zh，把这个 zh 交给 registerLocaleData 这个方法。

回到浏览器，再试一下这个日期选择组件，现在这个组件上显示的就会是简体中文了。

切换语言

下面我们可以在这个组件里添加一个切换语言用的按钮，回到项目，这里先把语言设置成 en_US 。

然后打开 DatePickerComponent 组件，在组件里可以注入一个依赖，添加一个构造方法，方法里面添加一个参数属性，private i18n，类型是 NzI18nService，这个服务来自 ng-zorro-antd，使用这个服务里的方法可以切换语言。

在这个组件里再添加一个方法，名字可以叫 switchLanguage，方法接收一个 language 参数，类型是 string。

方法里面用一个 swtich，检查一下 language 参数的值，如果它的值是 zh_CN，可以用一下 this.i18n 上的 setLocale 设置一下语言，设置成 zh_CN，注意这个 zh_CN 也来自 ng-zorro-antd。

再添加一种情况，如果 language 参数的值是 en_US，用一下 this.i18n 上的 setLocale，把语言设置成 en_US 。

模板

打开这个组件的模板文件，在这个模板文件里添加两个切换语言用的按钮，一组 button ，按钮文字是 中文，按钮上添加一个 nz-button，nzType 设置成 link，再给它绑定一个 click 事件，点击按钮执行组件里的 swtichLanguage 方法，参数值设置成 zh_CN 。

复制一份，修改一下按钮文字，English ，点击按钮执行 switchLanguage 方法，参数值设置成 en_US。

预览

再到浏览器上试一下，在这组按钮的周围可以用一组 div 包装一下。

现在这个日期选择器的语言是英文，按一下 中文 按钮，会把语言切换成简体中文，日期选择器组件上就会使用简体中文。

再试一下 English，它会把语言切换成英文，这样这个日期选择器就又会使用英文了。