剑道弹出未定义锚点

Posted 2023-05-07

【中文标题】剑道弹出未定义锚点

【英文标题】：Kendo Popup undefined anchor

【发布时间】：2022-01-08 10:41:12

【问题描述】：

我在实现 Kendo UI 弹出窗口的点击离开功能时遇到了一些问题，如下所述：https://www.telerik.com/kendo-angular-ui/components/popup/closing/

我的代码流程是用于实际过滤器弹出窗口的 [anchor] 是在容器中定义的。尽管如此，我确信这不是问题的一部分。我的组件文件（相关部分）：

@ViewChild("anchor",  read: ElementRef) public anchor: ElementRef;
    @ViewChild("popup",  read: ElementRef ) public popup: ElementRef;

    @HostListener("keydown", ["$event"])
    public keydown(event: any): void 
        if (event.keyCode === 27) 
        this.onToggle(false);
        
    

    @HostListener("document:click", ["$event"])
    public documentClick(event: any): void 
        if (!this.contains(event.target)) 
        this.onToggle(false);
        
    

private contains(target: any): boolean 
        return (
          this.anchor?.nativeElement?.contains(target) ||
          (this.popup ? this.popup.nativeElement.contains(target) : false)
        );
      
public onToggle(show? : boolean): void 
        this.show = show ?? !this.show;
    

html：

<button  #anchor (click)="onToggle()" mat-raised-button color="list-button">
    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <fa-icon [icon]="faFilter" class="fa-sm"></fa-icon>
        <div>Filter</div>
    </div>
</button>
<div class="kendo-override-popup mimick-material-popup">
    <kendo-popup #popup [popupAlign]="popupAlign" [anchorAlign]="anchorAlign"
        [anchor]="inputAnchor" [type]="slide" [margin]="margin" *ngIf="show">   

...

问题归结为单击按钮正确触发了切换，但是文档单击事件随后触发，并且它始终为包含返回 false，因此它也会自动关闭下拉列表。我运行了 kendo 在 stackblitz 中的示例，并且他们的视图子元素存在得很好，对我来说，无论我放在哪里，锚始终是未定义的，或者我是否读取了元素 ref

【参考方案1】：

在浏览和查看与未定义的 ViewChildren 相关的其他 SO 问题后，我遇到了针对我的问题的解决方案：

将整个组件包装在div 中 给该 div 一个标识符，例如：#wrapper 更新代码如下：

@ViewChildren("wrapper") 公共包装器：任意；

private contains(target: any): boolean 

        let button = this.wrapper?.first?.nativeElement?.children[0] as HTMLButtonElement;

        return (
           button.contains(target) ||
          //this.anchor?.nativeElement?.contains(target) ||
          (this.popup ? this.popup.nativeElement.contains(target) : false)
        );
      

这是可行的，因为我们知道我们的 html 布局是什么样的，因此我们非常确定 element[0] 是一个 html 按钮元素。这不是最漂亮的方法，但它有效