Как отобразить всплывающее окно уведомлений о сохранении для пользователя по нажатию кнопки навигации в углу 6

Question

Пример: Главная / Страница1 / Страница2 / Страница3. У меня есть несохраненные данные в Page3. Пользователь нажимает на Page2. Я хочу остаться на странице 3 и уведомить пользователя. Используя всплывающее окно с надписью «У вас есть несохраненные данные, и вы хотите сохранить?»

Answer 1

Псевдо-решение было бы использовать CanDeactivate средство защиты маршрута, где вы можете иметь ссылку на компонент формы.

Проверьте, верна ли форма для возврата true, чтобы перенаправить, иначе предупредить уведомление и вернуть false

Пример кода для

import { CanDeactivate } from '@angular/router'
import { ContactComponent } from './contact.component'

export class CanDeactivateContact implements CanDeactivate<ContactComponent> {
  canDeactivate(component: ContactComponent): boolean {
    if(component.contactForm.dirty) {
      return confirm('are you sure you want to leave this page');
    }
    return true;
  }
}

Пример стекаблика при https://stackblitz.com/edit/angular-candeactivate-route-guard