En utilisant l'injection de dépendance dans Angular 2 pour personnaliser un composant basé sur les attributs NgbDatepicker

Question

Je ne comprends pas comment DI peut être utilisé pour fournir un argument de constructeur spécifique dans un composant que j'ai importé. Le NgbDatePicker contient une interface de formatage personnalisée (NgbDateParserFormatter), qui, une fois implémentée, peut être passée dans le constructeur du composant pour afficher des formats de date personnalisés. J'utilise le composant NgbDatePicker comme suit:

Si j'encapsulais le NgbDatePicker dans mon propre composant, alors je pourrais passer le NgbDateParserFormatter personnalisé à travers mon constructeur et l'appliquer. Cependant, je ne souhaite pas avoir un composant séparé.

Comment puis-je configurer un composant externe tel que le NgbDatePicker via DI depuis Angular 2?

Answer 1

L'équipe ng-bootstrap n'a toujours pas de démo pour cela, voici donc comment vous pouvez fournir un formateur personnalisé pour vos NgbDatePickers via le tableau de fournisseurs de votre NgModule.

Le formateur d'analyse personnalisé aura une fonction parse et une fonction format qui sont obligatoires. La fonction parse est responsable de la définition des informations du modèle interne et la fonction format gère l'affichage.

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}` : "";
    }
}

// extrait de 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 }
])

Notez que tout cela est basé sur leur propre code source

Voici un Plunker