如何在覆盖内单击事件时关闭 primeng p-overlaypanel [Angular]

Question

我正在学习 Angular。我创建了一个小部件。我正在使用 primeng 组件，即 p-overlaypanel。当我单击输入字段时，面板打开。我在覆盖面板本身内部有两个按钮 Apply 和 Cancel。我希望在单击取消按钮时关闭此叠加层。这里是stackblitz。这是我的代码。

timeselector.component.html

<div class="timeselector">
    <p-overlayPanel class="timeselector-overlay" #op>
        <div class="timeselector-panel">
            <p>Time selector</p>
            <br />
            <div>
                <button (click)="closeTimeselector($event, op)">
                  Cancel
                </button>
                <button>
                  Apply
                </button>
            </div>
        </div>
    </p-overlayPanel>
</div>

<div (click)="op.toggle($event)">
    <input type="text">
</div>

和timeselector.component.ts

import { ... } from '@angular/core';

@Component({
    ...
})
export class TimeselectorComponent implements OnInit {

    timeselectorOpen = false;

    constructor() {}

    ngOnInit(): void {}

    closeTimeselector(event, element) {
        if (this.timeselectorOpen) {
            element.hide(event);
            this.timeselectorOpen = false;
        }
        console.log("closer called");
    }
}

一种可能的解决方案是使用：

<button (click)="op.hide()">
  Cancel
</button>

但我不能这样做，因为我必须执行一些清理任务并在该小部件关闭时刷新一些值。

函数被调用，我已经在控制台上检查过了。但叠加层并没有倒塌。你可以直接去stackblitz。请指正。

Answer 1

基于文档

https://www.primefaces.org/primeng/#/overlaypanel

切换、显示、隐藏是方法

因此您只需添加

<button (click)="op.hide()">
  Cancel
</button>

这里的工作示例：

https://stackblitz.com/edit/angular-wb4hgw

Answer 2

您的问题是 "closeTimeselector" 函数中的条件 "if"。变量 "timeselectorOpen" 永远不会改变，但会在条件中检查并始终为 "false".

我想，你不控制 timeselectorOpen

import { ... } from '@angular/core';

@Component({
   ...
})
export class TimeselectorComponent implements OnInit {

timeselectorOpen = false;

  constructor() {}

  ngOnInit(): void {}

  closeTimeselector(event, element) {
    element.hide(event);
    console.log("closer called");
 } }

请尝试此代码。

Answer 3

在上述情况下使用 Viewchild 可能是最好的，因为它可以让您更好地控制功能

 @ViewChild('op', {static: false}) model;

（根据angular 8）。在以前的版本中语法不同，你不需要给出 {static:false}。

closeTimeselector(event) {
  this.model.hide();
    if (this.timeselectorOpen) {
        this.timeselectorOpen = false;
    }
    console.log("closer called");
}

通过使用 Viewchild，您将始终拥有模板的参考，因此您将在 TS 文件中获得更多控制权。

如何在覆盖内单击事件时关闭 primeng p-overlaypanel [Angular]

How to close primeng p-overlaypanel on click event from within the overlay [Angular]

typescript

primeng

angular