angular bootstrap 日期格式化程序服务中未找到模块问题
Module not found problem in angular bootstrap date formatter service
我正在创建一个 Angular 10 应用程序。在我的组件中,我使用了 Angular Bootstrap 日期选择器控件。文本框中显示的默认日期格式为 'yyyy-mm-dd'。但是我想要 'dd-mm-yyyy' 中的格式。所以我创建了一个服务并放入了我的核心模块。服务代码如下:
import { Injectable } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { isNumber, padNumber, toInteger } from '@ng-bootstrap/ng-bootstrap/util/util';
@Injectable()
export class CustomDateFormatterService extends NgbDateParserFormatter {
parse(value: string): NgbDateStruct {
if (value) {
const dateParts = value.trim().split('-');
if (dateParts.length === 1 && isNumber(dateParts[0])) {
return {day: toInteger(dateParts[0]), month: null, year: null};
} else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null};
} else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2])};
}
}
return null;
}
format(date: NgbDateStruct): string {
return date ?
`${isNumber(date.day) ? padNumber(date.day) : ''}/${isNumber(date.month) ? padNumber(date.month) : ''}/${date.year}` :
'';
}
}
我的核心模块是:
import { ErrorHandler, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ClientSideErrorHandlerService } from './error-handler-service/client-side-error-handler.service';
import { ApiService } from './api-service/api.service';
import { HttpErrorHandlerServiceService } from './http-error-handler-service/http-error-handler-service.service';
import { NgbDateParserFormatter, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateFormatterService } from './date-formatter-service/custom-date-formatter.service';
@NgModule({
imports: [
CommonModule,
HttpClientModule,
NgbModule,
],
declarations: [],
exports: [
//NgbModule,
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: HttpErrorHandlerServiceService, multi: true },
{ provide: ErrorHandler, useClass: ClientSideErrorHandlerService },
{ provide: NgbDateParserFormatter, useClass: CustomDateFormatterService },
ApiService,
]
})
export class CoreModuleModule {
constructor(@Optional() @SkipSelf() core: CoreModuleModule) {
if (core) {
throw new Error("You should import core module only in the root module")
}
}
}
但我收到以下错误:
./src/app/core-module/date-formatter-service/custom-date-formatter.service.ts
Module not found: Error: Can't resolve
'@ng-bootstrap/ng-bootstrap/util/util' in 'D:\Workspace\My
Projects\e-Cash
Apps\eCash-Web\src\app\core-module\date-formatter-service'
谁能建议我如何解决这个问题?
我找到了解决方案。以下服务可以达到目的。
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
readonly DELIMITER = '-';
parse(value: string): NgbDateStruct | null {
if (value) {
let date = value.split(this.DELIMITER);
return {
day: parseInt(date[0], 10),
month: parseInt(date[1], 10),
year: parseInt(date[2], 10)
};
}
return null;
}
format(date: NgbDateStruct | null): string {
return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
}
}
将此服务放在模块的提供者部分。它将在日期选择器控件 select 之后格式化日期。
我正在创建一个 Angular 10 应用程序。在我的组件中,我使用了 Angular Bootstrap 日期选择器控件。文本框中显示的默认日期格式为 'yyyy-mm-dd'。但是我想要 'dd-mm-yyyy' 中的格式。所以我创建了一个服务并放入了我的核心模块。服务代码如下:
import { Injectable } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { isNumber, padNumber, toInteger } from '@ng-bootstrap/ng-bootstrap/util/util';
@Injectable()
export class CustomDateFormatterService extends NgbDateParserFormatter {
parse(value: string): NgbDateStruct {
if (value) {
const dateParts = value.trim().split('-');
if (dateParts.length === 1 && isNumber(dateParts[0])) {
return {day: toInteger(dateParts[0]), month: null, year: null};
} else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null};
} else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2])};
}
}
return null;
}
format(date: NgbDateStruct): string {
return date ?
`${isNumber(date.day) ? padNumber(date.day) : ''}/${isNumber(date.month) ? padNumber(date.month) : ''}/${date.year}` :
'';
}
}
我的核心模块是:
import { ErrorHandler, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ClientSideErrorHandlerService } from './error-handler-service/client-side-error-handler.service';
import { ApiService } from './api-service/api.service';
import { HttpErrorHandlerServiceService } from './http-error-handler-service/http-error-handler-service.service';
import { NgbDateParserFormatter, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateFormatterService } from './date-formatter-service/custom-date-formatter.service';
@NgModule({
imports: [
CommonModule,
HttpClientModule,
NgbModule,
],
declarations: [],
exports: [
//NgbModule,
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: HttpErrorHandlerServiceService, multi: true },
{ provide: ErrorHandler, useClass: ClientSideErrorHandlerService },
{ provide: NgbDateParserFormatter, useClass: CustomDateFormatterService },
ApiService,
]
})
export class CoreModuleModule {
constructor(@Optional() @SkipSelf() core: CoreModuleModule) {
if (core) {
throw new Error("You should import core module only in the root module")
}
}
}
但我收到以下错误:
./src/app/core-module/date-formatter-service/custom-date-formatter.service.ts Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap/util/util' in 'D:\Workspace\My Projects\e-Cash Apps\eCash-Web\src\app\core-module\date-formatter-service'
谁能建议我如何解决这个问题?
我找到了解决方案。以下服务可以达到目的。
@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
readonly DELIMITER = '-';
parse(value: string): NgbDateStruct | null {
if (value) {
let date = value.split(this.DELIMITER);
return {
day: parseInt(date[0], 10),
month: parseInt(date[1], 10),
year: parseInt(date[2], 10)
};
}
return null;
}
format(date: NgbDateStruct | null): string {
return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
}
}
将此服务放在模块的提供者部分。它将在日期选择器控件 select 之后格式化日期。