第二次焦点后触发日期选择器的Angular指令

Question

我正在为datepicker制作一个角度指令。它不能按要求工作，当我第二次在输入框中聚焦时，日期选择器会触发。以下是相同的代码。

指令

import {Directive, HostListener} from '@angular/core';

declare const $: any;

@Directive({
  selector: '[appDatePicker]'
})
export class DatePickerDirective {

  constructor() {

  }

  @HostListener('focus') onFocus() {
    $('.date-picker').datepicker({
      autoclose: true,
      todayHighlight: true
    });
  }

}

在组件中使用

 <input appDatePicker type="text" required name="title" 
class="date-picker form-control" placeholder="01/01/2018">

我正在使用Bootstrap datepicker。 Link

表单HTML

<form role="form" #createForm="ngForm">

            <div class="form-group row">
              <label class="col-4 col-form-label">Occasion<span class="text-danger">*</span></label>
              <div class="col-7">
                <input type="text" name="code" required [(ngModel)]="holiday.occasion" class="form-control"
                       placeholder="New Year">
              </div>
            </div>

            <div class="form-group row">
              <label class="col-4 col-form-label">Date<span class="text-danger">*</span></label>
              <div class="col-7">
                <input appDatePicker type="text" required name="title" [(ngModel)]="holiday.off_date" class="date-picker form-control"
                       placeholder="01/01/2018">

              </div>
            </div>



            <div class="form-group row">
              <div class="col-7 offset-4">
                <button (click)="store()" type="submit" [disabled]="!createForm.form.valid || actionRecordLoader"
                        class="btn btn-purple waves-effect waves-light">
                  <span *ngIf="!actionRecordLoader">Create</span>
                  <app-button-loader *ngIf="actionRecordLoader"></app-button-loader>
                </button>
                <button type="reset"
                        class="btn btn-light waves-effect m-l-5">
                  Reset
                </button>
                <app-back-button></app-back-button>
              </div>
              <div class="col-7 offset-4">
                <ul>
                  <li class="text-danger" *ngFor="let error of errors | keyValueConvert">{{error.value}}</li>
                </ul>
              </div>
            </div>
          </form>