angular - 如何在叠加层内关闭点击事件的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

您的问题是“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");
 } }

请试试这个代码。