Как закрыть первичную p-оверлейную панель по событию щелчка из оверлея [Angular] - PullRequest
Новая
       5

Как закрыть первичную p-оверлейную панель по событию щелчка из оверлея [Angular]

1 голос
/ 09 января 2020

Я учусь 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>

Но я не могу этого сделать, потому что мне нужно выполнить какое-то задание по очистке и flu sh некоторые значения, когда этот виджет закрыт.

Вызвана функция, которую я проверил на консоли. Но наложение не рушится обратно. Вы можете напрямую go к стеку бликов. Пожалуйста, поправьте меня.

Ответы [ 3 ]

1 голос
/ 09 января 2020

Ваша проблема - условие «если» в функции «closeTimeselector». Переменная timeselectorOpen никогда не изменяется, но проверяется в условии и всегда ложна.

Я думаю, вы не управляете 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");
 } }

Пожалуйста, попробуйте этот код.

1 голос
/ 09 января 2020

Использование Viewchild в описанной выше ситуации может быть наилучшим, поскольку дает вам больший контроль над функциями 

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

(в соответствии с angular 8). В предыдущих версиях синтаксис был другим, вам не нужно указывать {stati c: false}. 

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

Используя Viewchild, вы всегда будете иметь ссылку на шаблон, так что вы получите больше контроля в ваш файл TS.

1 голос
/ 09 января 2020

На основе документации

https://www.primefaces.org/primeng/# / оверлейная панель

методы переключения, отображения, скрытия

Таким образом, вы можете просто добавить 

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

рабочий пример здесь:

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

...