使用 angularx-flatpickr 在 Angular 上加载语言环境时出错

【问题标题】：Error when loading locale on Angular using angularx-flatpickr使用 angularx-flatpickr 在 Angular 上加载语言环境时出错
【发布时间】：2019-09-23 07:04:21
【问题描述】：

将语言环境添加到角度组件的指令中：

<input
type="text"
name="date"
mwlFlatpickr
[altInputClass]="'form-control'"
[(ngModel)]="post.date"
[altInput]="true"
[inline]="true"
[dateFormat]="'d.m.y'"
[locale]="'Portuguese'"
[defaultValue]="'today'"
[convertModelValue]="true">

尝试加载语言环境时，返回错误：

错误：flatpickr：无效的语言环境葡萄牙语

在 setupLocale (flatpickr.js:1910) 在 init (flatpickr.js:581) 在 FlatpickrInstance (flatpickr.js:2419) 在 _flatpickr (flatpickr.js:2438) 在 flatpickr (flatpickr.js:2463) 在 FlatpickrDirective .push../node_modules/angularx-flatpickr/fesm5/angularx-flatpickr.js.FlatpickrDirective.ngAfterViewInit (angularx-flatpickr.js:295) 在 callProviderLifecycles (core.js:22416) 在 callElementProvidersLifecycles (core.js:22390) 在在 checkAndUpdateView (core.js:23316) 处调用LifecycleHooksChildrenFirst (core.js:22380)

【问题讨论】：

标签： angular locale flatpickr

【解决方案1】：

在您的 module.ts 文件上，导入所有必要的文件，创建一个名为 flatpickrFactory 的函数，并导入与您的语言对应的语言 (All languages files are here)

import { FlatpickrModule, FLATPICKR } from 'angularx-flatpickr';
import flatpickr from 'flatpickr';
import { Portuguese } from 'flatpickr/dist/l10n/pt';

export function flatpickrFactory() {
  flatpickr.localize(Portuguese);
  return flatpickr;
}

现在，在您的 component.ts 上将 flatpickrFactory(); 导入您的 ngOnInit() 方法。

ngOnInit() {
  flatpickrFactory();

  // Your other logic here...
}

然后在你的 component.html (templateUrl) 中添加指令，像这个例子：

<input 
  type="text" 
  mwlFlatpickr 
  [(ngModel)]="selectedDate" 
  [altInput]="true" 
  [dateFormat]="'d.m.y'"
  [locale]="'Portuguese'"
  [convertModelValue]="true">

【讨论】：