Angular指令使用疑问：ngx-bootstrap bsDatepicker绑定按钮异常

我之前也碰到过类似的场景——不想用默认的输入框，直接把bsDatepicker绑在按钮上触发日期选择器，刚开始也踩了和你一样的坑。下面给你两种靠谱的解决办法，亲测有效：

方法一：模板引用变量直接调用指令方法 #

这是最简单直接的方式，不用改组件类代码，纯模板就能搞定：

<button type="button" class="btn btn-primary"
        #datePickerRef="bsDatepicker"
        (click)="datePickerRef.toggle()"
        bsDatepicker>
  点击选择日期
</button>

关键说明： #

• #datePickerRef="bsDatepicker"：把bsDatepicker指令的实例绑定到模板变量datePickerRef上
• (click)="datePickerRef.toggle()"：点击按钮时直接调用指令内置的toggle()方法，这个方法是ngx-bootstrap官方提供的，用来切换日期选择器的显示/隐藏状态
• 这样配置后，点击按钮就能在按钮下方弹出日期选择器，而且不会出现控制台报错

方法二：通过ViewChild在组件类中控制 #

如果需要在组件逻辑里做更多操作（比如根据条件控制日期选择器的显示），可以用这种方式：

组件类代码： #

import { Component, ViewChild } from '@angular/core';
import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';

@Component({
  selector: 'app-date-picker-btn',
  templateUrl: './date-picker-btn.component.html'
})
export class DatePickerBtnComponent {
  // 获取bsDatepicker指令的实例
  @ViewChild(BsDatepickerDirective) datePickerDirective!: BsDatepickerDirective;

  openDatePicker() {
    // 调用指令的toggle方法切换显示状态
    this.datePickerDirective.toggle();
  }
}

模板代码： #

<button type="button" class="btn btn-primary"
        (click)="openDatePicker()"
        bsDatepicker>
  点击选择日期
</button>

为什么你之前会报错？ #

你提到的_co.toggle() is...错误，大概率是因为你直接在按钮上写了(click)="toggle()"，但组件类里并没有定义这个toggle()方法——ngx-bootstrap的bsDatepicker指令本身有内置的toggle方法，但你没有正确引用到它，所以Angular会去组件实例里找这个方法，找不到就会报错。上面两种方法都是直接调用指令内置的toggle方法，所以能完美解决这个问题。

内容的提问来源于stack exchange，提问作者4rrow