如何在叠加层内关闭点击事件的primeng p-overlaypanel [Angular]

Question

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

时间选择器.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

您的问题是“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 2

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

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

（根据角度8）。在以前的版本中，语法有所不同，您不需要给出 {static:false}。

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

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