我的 Angular 5 应用程序中有一个自定义日期适配器:
import {NativeDateAdapter} from "@angular/material";
import {Injectable} from "@angular/core";
@Injectable()
export class CustomDateAdapter extends NativeDateAdapter {
parse(value: any): Date | null {
if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
const str = value.split('/');
return new Date(Number(str[2]), Number(str[1])-1, Number(str[0]), 12);
}
const timestamp = typeof value === 'number' ? value : Date.parse(value);
return isNaN(timestamp) ? null : new Date(timestamp);
}
format(date: Date, displayFormat: Object): string {
return date.getFullYear() + "-" + (date.getMonth() + 1).toString().padStart(2, '0') + "-" + date.getDate().toString().padStart(2, '0');
}
}
在app.module.ts中定义
@NgModule({
imports: [...],
declarations: [...],
providers: [
...,
{ provide: DateAdapter, useClass: CustomDateAdapter }
],
bootstrap: [
AppComponent
]
})
export class AppModule {}
它工作得很好,但是当将 Angular/Material 升级到版本 6 时它停止了。这是我现在遇到的错误:
ERROR TypeError: Cannot read property 'TRIDENT' of undefined
at new NativeDateAdapter (native-date-adapter.ts:83)
at new CustomDateAdapter (custom.date.adapter.ts:5)
at _createClass (ng_module.ts:171)
at _createProviderInstance$1 (ng_module.ts:143)
at resolveNgModuleDep (ng_module.ts:104)
at NgModuleRef_.get (refs.ts:502)
at resolveDep (provider.ts:416)
at createClass (provider.ts:276)
at createDirectiveInstance (provider.ts:135)
at createViewNodes (view.ts:303)
我遇到了类似的问题CustomeDateAdapter in Angular Material 6并尝试了推荐的修复,包括构造函数
constructor(matDateLocale: string) {
super(matDateLocale, new Platform());
}
现在它会产生以下错误:
ERROR Error: StaticInjectorError(AppModule)[DateAdapter -> String]:
StaticInjectorError(Platform: core)[DateAdapter -> String]:
NullInjectorError: No provider for String!
at NullInjector.get (injector.ts:35)
at resolveToken (injector.ts:332)
at tryResolveToken (injector.ts:274)
at StaticInjector.get (injector.ts:154)
at resolveToken (injector.ts:332)
at tryResolveToken (injector.ts:274)
at StaticInjector.get (injector.ts:154)
at resolveNgModuleDep (ng_module.ts:124)
at _createClass (ng_module.ts:173)
at _createProviderInstance$1 (ng_module.ts:143)
知道如何让它再次工作吗?
最佳答案
我使用 MomentDateAdapter
和自定义日期格式解决了这个问题。
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component";
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from "@angular/material";
import {MomentModule} from "ngx-moment";
import {MomentDateAdapter} from '@angular/material-moment-adapter';
export const ISO_FORMAT = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@NgModule({
imports: [
MomentModule,
...
],
declarations: [
AppComponent,
...
],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: ISO_FORMAT},
...
],
bootstrap: [
AppComponent
]
})
export class AppModule {}
关于angular - 自 Angular/Material 从 5 升级到 6 以来,自定义 native 日期适配器不再起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51195601/