Estoy aprendiendo Angular. He creado un widget. Estoy usando el componente primeng , es decir, p-overlaypanel . El panel se abre cuando hago clic en un campo de entrada. Tengo dos botones Apply y Cancel dentro del propio panel superpuesto. Quiero que esta superposición se cierre cuando haga clic en el botón Cancelar. Aquí está el stackblitz . Y aquí está mi código.
selector de tiempo.componente.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>Y selector de tiempo.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"); } }Una de las posibles soluciones es utilizar:
<button (click)="op.hide()"> Cancel </button>Pero no puedo hacerlo porque tengo que hacer una tarea de limpieza y vaciar algunos valores cuando ese widget está cerrado.
Se llama a la función, que he comprobado en la consola. Pero la superposición no se está derrumbando. Puedes ir directamente al stackblitz. Por favor corrigeme.
Su problema es la condición "si" en la función "closeTimeselector". La variable "timeselectorOpen" nunca cambia, pero se verifica en la condición y siempre es "falsa".
Creo que no controlas el selector de tiempo Abrir
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"); } }Por favor, prueba este código.
Usar Viewchild en la situación anterior podría ser lo mejor, ya que le brinda más control sobre las funciones
@ViewChild('op', {static: false}) model;(Según angular 8). En las versiones anteriores, la sintaxis era diferente, no necesita dar {static:false}.
closeTimeselector(event) { this.model.hide(); if (this.timeselectorOpen) { this.timeselectorOpen = false; } console.log("closer called"); }Al usar Viewchild, siempre tendrá una referencia para la plantilla, por lo que tendrá más control en su archivo TS.
Basado en la documentación
https://www.primefaces.org/primeng/#/overlaypanel
alternar, mostrar, ocultar son los métodos
Así que simplemente puede agregar
<button (click)="op.hide()"> Cancel </button>ejemplo de trabajo aquí: