在ngx bootstrap的日期选择器上分离输入和日历

我想在ngx引导程序的日期选择器上分离输入和日历。 然后我想将日期选择器的主体插入到特定的标记中。

这是我写的代码,请慢慢读

日期组成部分ts

import {
  Component, OnInit, OnDestroy, ViewChild, ComponentFactoryResolver, ViewContainerRef, Injector
} from '@angular/core';
import { BsDatepickerConfig } from 'ngx-bootstrap';
import { BsDatepickerContainerComponent } from 'ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component';

@Component({
  selector : 'app-date',
  templateUrl : './date.component.html'
})

export class DateComponent implements OnInit, OnDestroy {
  factory: any;
  injector: any;
  config: BsDatepickerConfig;
  instance: any;

  @ViewChild('dp', {read: ViewContainerRef}) dp;

  constructor(
    private resolver: ComponentFactoryResolver
  ) {
  }

  ngOnInit() {

    this.config = new BsDatepickerConfig();

    const minDate  = new Date(1900, 1, 1);
    const maxDate = new Date();
    maxDate.setHours(11, 59, 59, 999);

    this.config.minDate = minDate;
    this.config.maxDate = maxDate;
    this.config.showWeekNumbers = false;

    this.injector = Injector.create([{provide: BsDatepickerConfig, useValue: this.config}]);

    this.factory = this.resolver.resolveComponentFactory(BsDatepickerContainerComponent);

    this.instance = this.makeInstance(this.dp);

  }

  makeInstance(view: ViewContainerRef) {
    view.clear();
    const component = this.factory.create(this.injector);
    view.insert(component.hostView);
    return component.instance;
  }

  ngOnDestroy() {
  }
}

日期组成部分html

<div #dp></div>

如果此代码有任何问题,请与我们分享您的想法。