国际化

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

代码演示

基础样例

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

expand code expand code
import { Component, ViewChild, inject } from '@angular/core';

import { YelonFormModule, SFComponent, SFSchema } from '@yelon/form';
import { YUNZAI_I18N_TOKEN } from '@yelon/theme';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-i18n-simple',
  template: `
    <button nz-button type="button" (click)="changeLang('srv')">Change Language Via Service</button>
    <button nz-button type="button" (click)="changeLang('ref')">Change Language Via call refresh schema</button>
    <sf #sf [schema]="schema" (formSubmit)="submit($event)" />
  `,
  standalone: true,
  imports: [YelonFormModule, NzButtonModule]
})
export class FormI18nSimpleComponent {
  private readonly msg = inject(NzMessageService);
  private readonly i18n = inject(YUNZAI_I18N_TOKEN);

  @ViewChild('sf', { static: true }) comp!: SFComponent;
  schema = this.i18nSchema;

  private get i18nSchema(): SFSchema {
    return {
      properties: {
        name: {
          type: 'string',
          ui: {
            i18n: 'sf.name',
            descriptionI18n: 'sf.description',
            optionalHelp: {
              i18n: 'sf.description'
            }
          }
        },
        password: {
          type: 'string',
          title: this.i18n.fanyi('sf.name'),
          description: this.i18n.fanyi('sf.description'),
          ui: {
            type: 'password'
          }
        }
      },
      required: ['name', 'password']
    };
  }

  changeLang(type: 'srv' | 'ref'): void {
    this.i18n.use(this.i18n.zone === 'zh' ? 'en-US' : 'zh-CN');
    if (type === 'ref') {
      this.comp.refreshSchema(this.i18nSchema);
    }
  }

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}
Loading...