angular6 - ngb-datepicker 是否有 onHidden 事件？如果没有我们如何以角度向自定义组件添加事件？

Question

我正在使用来自此来源的日期选择器：https ://ng-bootstrap.github.io/#/components/datepicker/api

我想检查 ngb-datepicker 是否已关闭，因为我需要更改触发它的按钮的文本。

模板：

 <button (click)="dp.open(); changeText();">{{buttonText}}</button>
 <ngb-datepicker #dp 
     [(ngModel)]="model" 
     (onHidden)="changeButtonText2()"  <<---is this possible? >
/>

ts：

 import {Component} from '@angular/core';
 import {NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

 @Component({
    selector: 'ngbd-datepicker-basic',
    templateUrl: './datepicker-basic.html'
 })

 export class NgbdDatepickerBasic {

   buttonText: string = 'Open Calendar'

 constructor(private calendar: NgbCalendar) {
 }

 changeText() {
   this.buttonText = 'The Calendar is Open';
 }

 changeButtonText2() {
   this.buttonText = 'Open Calendar'
 }
}

ngx-bootstrap datepick 有这个，但似乎 ngb-datepicker 没有实现这个功能。有人可以帮我创建一个解决方法，这样我就不必为此使用 ngx-bootstrap 了吗？我已经添加了一些样式，所以...

谢谢 ：）

Answer 1

如果您正在使用弹出日期选择器并且只想更改文本按钮

<form class="form-inline">
  <button (click)="dpk.toggle()">{{ dpk.isOpen() ? 'The Calendar is Open' : 'Open Calendar' }}</button>
  <div class="form-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #dpk="ngbDatepicker">
  </div>
</form>

如果您想自定义更多代码，请使用：

@ViewChild('dpk') dpk: NgbDatepicker;

  ngAfterViewInit() {
    this.dpk['close'] = () => {
      if (this.dpk['isOpen']) {
        // super origin event
        this.dpk['_vcRef'].remove(this.dpk['_vcRef'].indexOf(this.dpk['_cRef'].hostView));
        this.dpk['_cRef'] = null;
        this.dpk['_closed$'].next();
        // custom code
        console.log('closed');
      }
    };
  }