Angular 在ngx引导程序上分离输入和日历'；s日期选择器

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

这是我写的代码，请慢慢看

date.component.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() {
  }
}

date.component.html

<div #dp></div>

---

这段代码有什么问题吗，请分享一些想法。

您可以使用ngx bootstrap提供的ComponentLoaderFactory 这容易多了 检查一下

作为样本

在组件加载器内部，您也可以找到如何注入组件的示例：）