Angular 用于在第二次聚焦后触发日期选择器的角度指令

我正在为日期选择器做一个角度指示。它没有按要求工作，当我在输入框中第二次聚焦时，日期选择器会触发。下面是相同的代码

指令

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">

我正在为此使用引导日期选择器

表单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>

场合*
日期*
创造
重置

{{error.value}

您是否尝试过在ngAfterViewInit钩子中注册一次小部件，而不是每次焦点事件发生时都注册？@yurzui如何注册此小部件？？你能帮忙吗？@yurzui我想我没有那种钩子。我说的对吗？有，你也可以在ngOnInit@yurzui它起作用了。谢谢