how to inject ng-bootstrap NgbDateParserFormatter in a utility class

问题

While reading/writing to datepicker, I have defined function to parse the year, month, day to date-format. I wanted to create a static class to use those function anywhere in my project as a Utility class. While doing so, I have a challenge with NgbDateParserFormatter DI token, as my methods in class are static amd in code below, this.ngbDateParserFormatter comes undefined. Although this entire code works fine when used inside component as this.ngbDateParserFormatter is not null there. Even if i defined it outside as Static it's still undefined. So, how to inject this token in a utility class.

import { Component, Injectable } from '@angular/core';
import {NgbDateParserFormatter, NgbDateStruct, NgbModal, NgbDate } from 
'@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';


export class DateFormatHelper {

 static datePipe = new DatePipe('en-US');


  constructor(private ngbDateParserFormatter: NgbDateParserFormatter) {
 }

 static formatedDate(val: any): any {
 const bDate = val;
  return this.ngbDateParserFormatter.format(bDate);
 }

 static parsengbDate(value: string): NgbDateStruct {
 let returnVal: NgbDateStruct;

  if (!value) {
   returnVal = null;
  } else {
       try {
       const dateParts = this.datePipe.transform(value, 'MM-dd- 
        yyyy').split('-');
       returnVal = { year: Number(dateParts[2]), month: 
       Number(dateParts[0]), day: Number(dateParts[1]) };
     } catch (e) {
       returnVal = null;
     }
   }
    return returnVal;
  }

回答1:

NgbDateParserFormatter will never be injected because injections only works with classes that are instantiated by Angulars dependency injection (DI).

To solve your problem I suggest to create an Injectable Service with all the methods you need and then inject it into each component which need its methods.

You can see the tutorial to use them here, but it would look like this:

import { Component, Injectable } from '@angular/core';
import {NgbDateParserFormatter, NgbDateStruct, NgbModal, NgbDate } from '@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DateFormatHelper {
  private datePipe = new DatePipe('en-US');
  constructor(private ngbDateParserFormatter: NgbDateParserFormatter) {
  }

 public formatedDate(val: any): any {
 const bDate = val;
  return this.ngbDateParserFormatter.format(bDate);
 }

 public parsengbDate(value: string): NgbDateStruct {
  let returnVal: NgbDateStruct;

  if (!value) {
   returnVal = null;
  } else {
     try {
       const dateParts = this.datePipe.transform(value, 'MM-dd- 
        yyyy').split('-');
       returnVal = { year: Number(dateParts[2]), month: 
       Number(dateParts[0]), day: Number(dateParts[1]) };
     } catch (e) {
       returnVal = null;
     }
   }
    return returnVal;
  }
}

P.S. Remember to add NgbDateParserFormatter as provider into your module to inject them (not DateFormatHelper cause I've already registered it in the @Injectable metadata). To understand how injection work take a look here

来源：https://stackoverflow.com/questions/55463203/how-to-inject-ng-bootstrap-ngbdateparserformatter-in-a-utility-class

标签

angular

typescript

static