Verwendung der Abhängigkeitsinjektion in Angular 2 zum Anpassen einer attributbasierten Komponente NgbDatepicker

Question

Ich kann nicht verstehen, wie DI verwendet werden kann, um ein bestimmtes Konstruktorargument in einer Komponente bereitzustellen, die ich importiert habe. Die NgbDatePicker enthält eine benutzerdefinierte Formatierungsschnittstelle (NgbDateParserFormatter), die bei Implementierung im Konstruktor an die Komponente übergeben werden kann, um benutzerdefinierte Datumsformate anzuzeigen. Ich bin mit dem NgbDatePicker Komponente wie folgt:

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

Wenn ich die NgbDatePicker in meine eigene Komponente eingewickelt, dann könnte ich die benutzerdefinierte NgbDateParserFormatter durch meine Konstruktor übergeben und sie anwenden. Ich möchte jedoch keine separate Komponente haben.

Wie kann ich eine externe Komponente wie die NgbDatePicker über DI von Angular 2 konfigurieren?

Answer 1

Das ng-Bootstrap-Team hat noch keine Demo für dieses Beispiel. So können Sie einen benutzerdefinierten Formatierer für Ihre NgbDatePicker über Ihr NgModule-Provider-Array bereitstellen.

Benutzerdefinierte Parse-Formatierer wird eine Parse und Format Funktion, die erforderlich sind. Parse ist verantwortlich für die internen Modellinformationen eingestellt werden und Format behandelt angezeigt werden.

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 } 
]) 

Beachten Sie, dass dies alles aus der their own source code

basiert Hier ist ein Plunker