Question

单击.k-overlay div或点击转义键时，我还没有看到内置方法让对话框关闭。这是用户过去关闭对话的一种相当标准的方式，我只是想确保我没有遗漏某些东西。

是否存在内置方式（不访问ElementRef并挂钩点击事件）以从转义和背景点击关闭对话框？

如果不是，我可以在组件中包装kendo对话框以扩展其功能和/或请求功能。感谢。

更新因此，如果没有办法做到这一点，我会提出一个解决方案，以防其他人遇到这个问题。

首先为点击和转义功能创建一个属性指令：

import { Directive, ElementRef, HostListener, Input, Renderer2, AfterViewInit,  } from "@angular/core";
import { DialogComponent } from "@progress/kendo-angular-dialog";

@Directive({
  selector: "[kendoDialogExtension]"
})
export class AsiKendoDialogExtensionsDirective implements AfterViewInit {
  @Input() kendoDialogExtension: DialogComponent;
  constructor(private el: ElementRef, private renderer: Renderer2) {
  }

  ngAfterViewInit(): void {
    const element = this.el.nativeElement.getElementsByTagName("div")[0];
    this.renderer.listen(element, "click", () => {
      this.kendoDialogExtension.close.emit();
    })
  }

  @HostListener("document:keydown", ["$event"])
  handelKeyboardEvent(event: KeyboardEvent) {
    if (event.keyCode === 27 && this.kendoDialogExtension) {
      this.kendoDialogExtension.close.emit();
    }
  }
}

然后创建一个看起来像这样的包装器组件：

   <div [kendoDialogExtension]="kendoDialog" *ngIf="opened">
      <kendo-dialog #kendoDialog [title]="title" (close)="closed.emit($event)">
        <ng-content></ng-content>
      </kendo-dialog>
    </div>

对话框关闭.k-overlay点击

0 个答案: