在ngx-bootstrap datepicker上单独输入和日历

Question

我想在ngx-bootstrap datepicker上分隔输入和日历。然后我想将datepicker的主体插入到特定的标签中。

所以这是我写的代码，请花点时间阅读

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>

这段代码有任何问题，请分享您的想法。

Answer 1

您可以使用ngx-bootstrap提供的ComponentLoaderFactory，只需检查https://github.com/valor-software/ngx-bootstrap/blob/4a7f2f0ed720d159430961f7acddfd781628561c/src/datepicker/bs-datepicker.component.ts就容易多了

作为样本

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