ngx-bootstrap 弹出窗口在外部点击时关闭

Question

我正在尝试创建一个 Angular 4 自定义表单控件作为我的日期选择器。我正在使用 ngx-bootstrap，到目前为止，我已经使用来自 ngx-bootstrap 的输入、日期选择器和弹出框组件设置了这个自定义表单控件。自定义控件打开一个弹出窗口，日期选择器处于焦点上，但是，我需要能够通过与弹出窗口内容交互来更改日期，并且当我不与弹出窗口或输入交互时它应该关闭。我试图在 the ngx-bootstrap github issue 上关注黑客。但是它不适用于我的情况。任何帮助，将不胜感激。

日期-picker.component.html

<input type="text" [value]="getDate() | date:'fullDate'" #popover="bs-popover" [placeholder]="placeholder" class="form-control"  triggers="" (focus)="popover.show()" [popover]="popTemplate" container="body" required>
<template  #popTemplate>
  <datepicker  [(ngModel)]="dt"  [minDate]="minDate" [showWeeks]="true"
               [dateDisabled]="dateDisabled"></datepicker>
</template>

日期-picker.component.ts

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ]
})
export class DatePickerComponent implements OnInit, ControlValueAccessor {
 @ViewChild('popover') popover;

  isOpen = false;

  @Input('placeholder') placeholder;
constructor(private _er: ElementRef) {
}

  @HostListener('click', ['$event']) onClick(event): void {
    console.log(event);
    if (
      this.isOpen
      && !this._er.nativeElement.contains(event.target)
      && !this.popover._popover!._componentRef!.location.nativeElement!.contains(event.target)
    ) {
      this.hide();
    }
  }

  hide() {
    this.isOpen = false;
    this.popover.hide();
  }

  show() {
    this.isOpen = true;
    this.popover.show();
  }
}

即使我在输入框或弹出窗口外单击，它也会保持打开状态。当使用模糊事件时，我什至无法与日历进行交互。它甚至在我 select 约会之前就关闭了。

Answer 1

@HostListener 装饰器在 Angular API Doc 中没有描述，但它将事件侦听器绑定到组件宿主元素。在你的情况下 <app-date-picker>。但是您希望在单击弹出窗口本身之外的任何位置时隐藏弹出窗口，因此您需要将侦听器绑定到整个页面（文档）。为此，您必须在事件名称中添加 document: 前缀：

@HostListener('document:click', ['$event'])

我不知道是否还有其他一些受支持的前缀，也许window。您可以使用 Plunker (from this ). There is also a question about the .

来玩这些事件

ngx-bootstrap 弹出窗口在外部点击时关闭

ngx-bootstrap popover close on outside click

events

typescript

bootstrap-4

ngx-bootstrap

angular