如何从叠加层 [角度] 中关闭 primeng p 覆盖面板上的点击事件

Question

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

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>

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

调用了该函数，我已经在控制台上检查过了。但覆盖层并没有塌陷。你可以直接去堆栈闪电战。请纠正我。

Answer 1

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

我认为，您无法控制时间选择器打开

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 文件中获得更多控制权。

Answer 3

基于文档

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

切换、显示、隐藏是方法

因此，您可以简单地添加

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

这里的工作示例：

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