Как обнаружить значок закрытия боковой панели PrimeNG и другие нажатия кнопок на боковой панели

Я пытаюсь отменить изменения, если пользователь нажимает значок закрытия, и сохраняет его, если нажимает кнопку сохранения. Но в документации PrimeNG Sidebar я не могу найти способ обрабатывать оба события клика по отдельности. Возможно ли это сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
97
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что вы слишком много думаете. Кнопка закрытия, показанная переменной PrimeNG showCloseIcon, обрабатывается самим PrimeNG. Все, что он делает, это закрывает элемент боковой панели. Если вы хотите закодировать пользовательское поведение, вам придется закодировать свои собственные кнопки.

Для закрытия кнопки закрытия PrimeNG вы можете подключиться к событию onHide и связать с ним функцию. Для кнопки сохранения вы просто подключаетесь к onClick, как и к любому другому событию Angular.

Итак, в коде: HTML

<p-sidebar [(visible)] = "display" (onHide) = "close()">
  <!-- Your form -->
  <button (click) = "save()">Save</button>
</p-sidebar>

HTML в случае пользовательской кнопки закрытия

<p-sidebar [(visible)] = "display">
  <button (click) = "close()"><span class = "x-button">&times;</span></button>
  <!-- Your form -->
  <button (click) = "save()">Save</button>
</p-sidebar>

CSS для кнопки

span .x-button {
    color:gray;
    opacity:0.7;
    font-size:1.5em;
}

JavaScript

function save() {...}
function close() {...//set display to false and do what you need to do}

Надеюсь это поможет!

onhide срабатывает при каждом закрытии события, единственная проблема в том, что я не могу различить, что вызвало его закрытие

Nithin P.H 18.04.2023 09:25

В этом случае я рекомендую не использовать встроенную кнопку закрытия, а вместо этого использовать пользовательскую кнопку с событием щелчка.

Nina Koninckx 18.04.2023 10:05

спасибо за вклад, я отключил встроенную кнопку закрытия и поместил пользовательскую :)

Nithin P.H 18.04.2023 12:38

Нет проблем, рад, что смог помочь! Не забудьте отметить ответ :)

Nina Koninckx 18.04.2023 12:58

Другие вопросы по теме