i18n 国际化

JSON Schema 本身只是一个 JSON 对象，因此本质上已经是支持国际化。此外，sf 还支持一些比较快捷的国际化方式，但它支持的元素比较基础：title、description、optionalHelp 三个元素。

代码演示

i18n 国际化 - 图1

基础样例

name 元素采用内置的国际化方式；password 采用外部国际化方式。

  1. import { Component, Inject, ViewChild } from '@angular/core';
  2. import { SFSchema, SFComponent } from '@delon/form';
  3. import { NzMessageService } from 'ng-zorro-antd/message';
  4. import { ALAIN_I18N_TOKEN } from '@delon/theme';
  5. import { I18NService } from '@core';
  7. @Component({
  8.   selector: 'form-i18n-simple',
  9.   template: `
  10.     <button nz-button type="button" (click)="changeLang('srv')">Change Language Via Service</button>
  11.     <button nz-button type="button" (click)="changeLang('ref')">Change Language Via call refresh schema</button>
  12.     <sf #sf [schema]="schema" (formSubmit)="submit($event)"></sf>
  13.   `,
  14. })
  15. export class FormI18nSimpleComponent {
  16.   @ViewChild('sf', { static: true }) comp: SFComponent;
  17.   schema = this.i18nSchema;
  19.   private get i18nSchema(): SFSchema {
  20.     return {
  21.       properties: {
  22.         name: {
  23.           type: 'string',
  24.           ui: {
  25.             i18n: 'sf.name',
  26.             descriptionI18n: 'sf.description',
  27.             optionalHelp: {
  28.               i18n: 'sf.description',
  29.             },
  30.           },
  31.         },
  32.         password: {
  33.           type: 'string',
  34.           title: this.i18n.fanyi('sf.name'),
  35.           description: this.i18n.fanyi('sf.description'),
  36.           ui: {
  37.             type: 'password',
  38.           },
  39.         },
  40.       },
  41.       required: ['name', 'password'],
  42.     };
  43.   }
  45.   constructor(public msg: NzMessageService, @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService) {}
  47.   changeLang(type: 'srv' | 'ref') {
  48.     this.i18n.use(this.i18n.zone === 'zh' ? 'en-US' : 'zh-CN');
  49.     if (type === 'ref') {
  50.       this.comp.refreshSchema(this.i18nSchema);
  51.     }
  52.   }
  54.   submit(value: any) {
  55.     this.msg.success(JSON.stringify(value));
  56.   }
  57. }