Блог

У меня будет отдельная колонка, состоящая из кнопок «Одобрить» и «Отклонить». При нажатии кнопки «Утвердить» ожидается, что появится пользовательское всплывающее окно с сообщением «Вы уверены, что хотите утвердить». Всплывающее окно будет иметь две кнопки: да(событие щелчка, направленное на функцию) и нет, возвращающее пользователя на ту же страницу.

То же самое ожидается и для кнопки «Отклонить».

Код реализован в машинописном виде (Angular 9 и выше).

Пожалуйста, посоветуйте. ТИА!

То, что вам следует делать, зависит от того, какую библиотеку компонентов пользовательского интерфейса вы используете. Практически все библиотеки компонентов пользовательского интерфейса имеют модальный компонент. Поэтому используйте модальный компонент, который предлагает ваша библиотека. например, модальный материал Angular, модальный загрузчик ngx и т. Д

Однако, если вы просто хотите создать свой собственный пользовательский модал, это довольно просто. Например.

HTML:

 <div>
  ...
  the main content for this component
  <button (click)="openModal()">open modal</button>
</div>

<div class="custom-modal-component" [class.hidden]="showModal">
  hello I am a modal
  <button (click)="closeModal()">close modal</button>      
  <button (click)="doSomethingAndCloseModal()">do something</button>      
</div>
 

scss:

 .custom-modal-component {

  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  margin-left: -250px;
  margin-top: -250px;
  z-index: 100;

  amp;.hidden {
    display: none;
  }
}
 

тс:

 showModal = false

openModal() {
  this.showModal = true
}

closeModal() {
  this.showModal = false
}

doSomethingAndCloseModal() {
  // do something code here
  this.closeModal()
}
 

Возможно, вы захотите улучшить это пользовательское решение, добавив наложение фона, сделав его многоразовым и т. Д. — Возможность повторного использования здесь обеспечивает разделение проблем. С акцентом на возможность повторного использования использование проекции контента является обязательным!