ngX-bootstrap을 사용하여 팝업 창을 추가하는 방법은 무엇입니까?

Question

ngx-bootstrap을 사용하여 datepickar를 추가하는 방법은 무엇입니까? 이 프로젝트는 Angular2 typescript2 ngx-bootstrap을 사용합니다. 나는 다음과 같은 일을하고있다 : HTML에서 :

<datepicker class="well well-sm main-calendar" [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="false" [dateDisabled]="dateDisabled"></datepicker> 

모듈에서 :

import { DatepickerModule } from 'ngx-bootstrap/datepicker'; 
@NgModule({ 
    imports: [ 
     DatepickerModule.forRoot() 
    ]}); 

Answer 1

이 기능은 현재 라이브러리에 존재하지 않습니다. 거기에 대한 논의는 여기에있다,하지만 아무것도 지금까지 발견되지 아니하였습니다 :

https://github.com/valor-software/ngx-bootstrap/issues/273

은 내가 날짜 선택기와 부트 스트랩 드롭 다운을 사용하여에 대한 해결 방법을 만들었습니다. 모듈 내부

<div class="dropdown" dropdown #datepickerDropdown="bs-dropdown" [autoClose]="false"> 
    <div class="input-group" dropdownToggle> 
    <input type="text" disabled="disabled" class="form-control" [value]="dateValue | date:'shortDate'" /> 
    <div class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </div> 
    </div> 
    <div *dropdownMenu class="dropdown-menu dropdown-date"> 
    <datepicker [(ngModel)]="dateValue" [minDate]="MinDate" [showWeeks]="false" (selectionDone)="closeDropdown()"></datepicker> 
    </div> 
</div> 

포함해야합니다 :

import { DatepickerModule } from 'ngx-bootstrap/datepicker'; 
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; 

및

잊지 마세요 여기에 HTML (MinDate 및 DATEVALUE 내 Component 클래스 내부의 두 값을 참고하시기 바랍니다)입니다

@NgModule({ 
    declarations: [...], 
    imports: [ 
    BsDropdownModule.forRoot(), 
    DatepickerModule.forRoot(), 
    ... (any other imports) 
    ], 
    providers: [...], 
    bootstrap: [AppComponent] 
]) 

날짜 선택시 드롭 다운을 자동으로 닫으려면 사용자가 월을 변경하려는 경우를 클릭 할 때 자동 분류를 사용하지 않으려했습니다. 따라서 selectionDate 이벤트를 사용해야했습니다. 함수를 제대로 작성하려면이를 컴포넌트로 가져와야합니다. 당신은 구성 요소에 다음과 수입을 포함해야합니다

import { ViewChild, ... } from '@angular/core'; 
import { BsDropdownDirective } from 'ngx-bootstrap/dropdown'; 

그런 다음 다음을 수행하여 구성 요소 클래스 내부의 드롭 다운을 참조 할 수 있습니다

@ViewChild('datepickerDropdown') private datepickerDropdown: BsDropdownDirective; 

closeDropdown() { 
    this.datepickerDropdown.hide(); 
} 

을 내가 도울 수 있었다 바랍니다. 이것은 저에게 효과적이지만 다른 사람들 모두에게 효과가 있을지 확신 할 수 없습니다.