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

Question

我无法理解如何使用 DI 在我导入的组件中提供特定的构造函数参数。 NgbDatePicker 包含一个自定义格式化程序接口(interface) (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？

Answer 1

ng-bootstrap 团队仍然没有这方面的演示，所以这里介绍了如何通过 NgModule 提供程序数组为 NgbDatePickers 提供自定义格式化程序。

自定义解析格式化程序将具有一个解析 和一个格式化 函数，这是必需的。 Parse 负责设置内部模型信息，format 处理显示。

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