NgbDatePicker - 如何将longDate字符串绑定到[ngModel]？

我试图将格式化为“longDate”字符串的日期绑定到ngbDatePicker中的[ngModel]输入值 . 例如，当用户选择日期时，我想显示“2017年1月15日”而不是“2017-01-15” .

我知道[ngModel]仅绑定到NgbDateStruct类型的对象，在我看来，当我将类型为NgbDateStruct的对象（让我们将其称为selectedStartDate，如下面的代码所示）传递给[ngModel]时，然后是NgbDateParserFormatter.format（selectedStartDate） ）在幕后调用以将日期显示为“yyyy-MM-dd” . 那么如何将longDate格式（即2017年1月15日）绑定到[ngModel]？我已经考虑过覆盖NgbDateParserFormatter中的format（）方法来显示我想要的日期，但我不确定当我传递一个NgbDateStruct对象绑定到[ngModel]时它是如何被调用的 .

另外，保留NgbDateStruct解析/格式方法会很好，因为我将日期数据作为“yyyy-MM-dd”字符串传递给API，这些都派上用场了 . 我正在使用ngbootstrap alpha.18 . 任何帮助表示感谢！

<div class="form-group">From:
    <div class="input-group">
        <input class="form-control"
               name="dp1" 
               [ngModel]="selectedStartDate"
               (ngModelChange)="selectStartDate($event)" 
               ngbDatepicker 
               [dayTemplate]="customDay" 
               [markDisabled]="isDisabled" 
               #d1="ngbDatepicker" />
        <div class="input-group-addon" (click)="d1.toggle()">
            <img src="img/calendar-icon.svg" style="width: 1.2rem; height:    1rem; cursor: pointer;" />
        </div>
    </div>
</div>

更新：虽然下面的解决方案有效，但由于某种原因，我无法设置默认日期值 . 例如，从我的日期选择器所在的组件，我在ngOnInit（）中实现OnInit和表单我将我的“selectedStartDate”绑定字段设置为类型为NgbDateStruct的日期 . 然后在调试模式下，我能够看到我的selectedStartDate字段被填充，最终调用MyNgbDateParserFormatter.format（）将日期格式化为“longDate”字符串 - 但是format（）方法中的date参数为null，当然会抛出一个错误......我无法弄清楚为什么它会变为null . 之后，当我选择日期时，“selectedDate”将按照预期以“longDate”格式显示 .

我注意到的下一个问题是，现在每次选择日期时，方法selectStartDate（）都不会被触发 .

这是我的模块（我在'共享模块'中提供这个，因为这是我声明使用ngbdatepicker的组件的地方）

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        NgbModule,
        ChartsModule
    ],
    exports: [
        CommonModule,
        FormsModule,
        NgbModule,
        CrgbFilterComponent,
        DateFilterComponent,
        BarChartComponent,
        LineChartComponent,
        ChartsModule
    ],
    declarations: [
        CrgbFilterComponent,
        DateFilterComponent,
        BarChartComponent,
        LineChartComponent
    ],
    providers: [
        {
            provide: NgbDateParserFormatter,
            useFactory: () => { return new CustomNgbDateParserFormatter("longDate") }
        },
        DateFilterService,
        BarChartService,
        TableService,
        HelperMethodsService
    ]
})
export class SharedModule { }

这是我的组件（重要的部分）：

export class DateFilterComponent implements OnInit {

 selectedStartDate: NgbDateStruct;
 selectedEndDate: NgbDateStruct;
 @Output() startDateChanged: EventEmitter<string>;
 @Output() endDateChanged: EventEmitter<string>;

    constructor(private dateFilterService: DateFilterService) {
        this.startDateChanged = new EventEmitter<string>();
        this.endDateChanged = new EventEmitter<string>();
    }

 ngOnInit(): void {
        this.selectStartDate(this.dateFilterService.setDefaultStartDate());
        this.selectEndDate(this.dateFilterService.setDefaultEndDate());
    }

 selectStartDate(date: NgbDateStruct) {
        if (date != null) {
            this.selectedStartDate = date;
            let dateString = this.dateFilterService.toServerString(date);;
            this.startDateChanged.emit(dateString);
        }
    }

 selectEndDate(date: NgbDateStruct) {
        if (date != null) {
            this.selectedEndDate = date;
            let dateString = this.dateFilterService.toServerString(date);
            this.endDateChanged.emit(dateString);
        }
    }

这是我的日期过滤服务：

export class DateFilterService {

    constructor(private parserFormatter: NgbDateParserFormatter) { }

    setDefaultStartDate(): NgbDateStruct {
        // removing for simplicity, returning a NgbDateStruct object correctly.
    }

    setDefaultEndDate(): NgbDateStruct {
        // removing for simplicity, returning a NgbDateStruct object correctly.
    }

    toNgbDateStruct(date: string): NgbDateStruct {
        return this.parserFormatter.parse(date);
    }

    tolongDateString(date: NgbDateStruct): string {
        return this.parserFormatter.format(date);
    }

    toServerString(date: NgbDateStruct): string {
        return this.parserFormatter.formatForServer(date);
    }
}

感谢您提前帮助，谢谢 .