在ngx-bootstrap的日期選擇器上分開輸入和日曆

Question

我想在ngx-bootstrap的日期選擇器上分開輸入和日曆。 然後，我想將日期選擇器的主體插入到特定的標記中。

所以這是我寫的代碼，請把你的時間來閱讀它

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-引導 ComponentLoaderFactory它更容易 只是檢查https://github.com/valor-software/ngx-bootstrap/blob/4a7f2f0ed720d159430961f7acddfd781628561c/src/datepicker/bs-datepicker.component.ts

爲樣本

組件裝載的裏面你可以找到一個樣本如何過注入組件:)