javascript - 在Angular 2中使用依赖注入(inject)来自定义基于属性的组件NgbDatepicker

我无法理解如何在我导入的组件中使用DI来提供特定的构造函数参数。 NgbDatePicker包含一个自定义格式器接口（NgbDateParserFormatter），该接口在实现时可以在构造函数中传递给组件以显示自定义日期格式。
我正在使用NgbDatePicker组件，如下所示：

<input class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker
    name="dp-start" [(ngModel)]="startDate"
    #dpStart="ngbDatepicker" id="dp-start">

如果将NgbDatePicker包装在自己的组件中，则可以通过构造函数传递自定义NgbDateParserFormatter并将其应用。但是，我不希望有一个单独的组成部分。

如何通过Angular 2中的DI配置外部组件，例如NgbDatePicker？

最佳答案

ng-bootstrap团队仍然没有针对此的演示，因此这是您可以通过NgModule提供程序数组为NgbDatePickers提供自定义格式化程序的方法。

自定义解析格式器将具有所需的解析和格式化功能。解析负责设置内部模型信息并显示格式句柄。

custom.formatter.ts

import { NgbDatepickerConfig, NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";

export class CustomDateParserFormatter extends NgbDateParserFormatter {
    parse(value: string): NgbDateStruct {
        if (value) {
            const dateParts = value.trim().split('-');
            if (dateParts.length === 1 && isNumber(dateParts[0])) {
                return { month: toInteger(dateParts[0]), day: null, year: null };
            } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
                return { month: toInteger(dateParts[0]), day: toInteger(dateParts[1]), year: null };
            } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return { month: toInteger(dateParts[0]), day: toInteger(dateParts[1]), year: toInteger(dateParts[2]) };
            }
        }
        return null;
    }

    format(date: NgbDateStruct): string {
        return date ? `${isNumber(date.month) ? padNumber(date.month) : ''}-${isNumber(date.day) ? padNumber(date.day) : ''}-${date.year}` : "";
    }
}

// lifted out of ng-bootstrap
function toInteger(value: any): number {
    return parseInt(`${value}`, 10);
}

function padNumber(value: number) {
    if (isNumber(value)) {
        return `0${value}`.slice(-2);
    } else {
        return '';
    }
}

function isNumber(value: any): boolean {
    return !isNaN(toInteger(value));
}

module.ts

import {CustomDateParserFormatter} from "src/custom.datepicker-parser-formatter"
import {NgbDateParserFormatter} from "@ng-bootstrap/ng-bootstrap"

<...>
@NgModule({<...>, providers: [
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
])

请注意，这全部基于their own source code

这是一个Plunker

关于javascript - 在Angular 2中使用依赖注入(inject)来自定义基于属性的组件NgbDatepicker，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41241446/