Question

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

NgbDatePicker

如果我将str = "{boob}"; str = str.replace(/[\{\}]/g, ""); // yields "boob"包装在我自己的组件中，那么我可以通过我的构造函数传递自定义{{1}}并应用它。但是，我不希望有一个单独的组件。

如何从Angular 2配置外部组件，例如{{1}}到DI？

Answer 1

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

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

<强> 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

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

1 个答案: