如何在 Angular 中外部化 p-calendar 语言环境

Question

我正在使用 PrimeNg 6 中的 p-calendar。日历默认以英文显示所有内容，但我们可以使用 [locale]=anyLanguage 更改日、日、月等。这是 stackblitz。您现在可以看到我只添加了 2 种语言，即西班牙语和阿拉伯语。

app.component.html

<p-calendar [(ngModel)]="value" name="test" [locale]="arabic"></p-calendar>

app.component.ts

import { Component, OnInit, VERSION } from "@angular/core";
import moment, { Moment } from "moment";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;

  value;

  public es: any;
  public arabic: any;

  ngOnInit() {

    // spanish calendar
    this.es = {
      ...
    };

    // arabic calendar
    this.arabic= {
      ...
    };
  }
}

我的技术负责人对此不满意。她说，如果我们明天再增加 15 种语言，那么谁将回到代码中。她希望我将它保存在另一个打字稿文件或 json 的某个地方。以便我们以后可以添加更多语言。但是 locale 明天可以通过父组件传递，所以这不是问题。但是请帮助我如何外部化语言变量。

Answer 1

首先，我建议您寻找一个库来使应用程序国际化。这将允许您将所有翻译保存在一个单独的文件中（例如 i18, ngx-translate or i18next）。您设置默认语言，当用户更改语言时，您也更改语言。这样，语言变量就被外化了。

其次，我建议升级 PrimeNG 版本 11，它有一个 API 允许您翻译日历组件。此外，它可以与我之前所说的许多库一起使用。

使用这些版本并且没有任何库，唯一的方法就是你如何拥有它。

如何在 Angular 中外部化 p-calendar 语言环境

How to externalize p-calendar locale in Angular

javascript

primeng

angular