Блог

Главная - Вопросы по программированию - Угловой, Показывает предупреждение об успехе после навигации рутера

Угловой, Показывает предупреждение об успехе после навигации рутера

#angular #typescript #bootstrap-4

Вопрос:

Я пытаюсь найти способ создать всплывающее сообщение или предупреждение после успешного заполнения формы и перенаправления на другую страницу в Angular

Что-то вроде «Новая форма успешно добавлена» после навигации

Это мой код для навигации по корневому каталогу

 specialEvents = []

  constructor(    private _eventService: EventService,
    private _router: Router) { }

  ngOnInit(): void {
    this._eventService.getSpecialEvents()
      .subscribe(
        res => this.specialEvents = res,
        err => {
          if( err instanceof HttpErrorResponse ) {
            if (err.status === 401) {
              this._router.navigate(['/home'])
            }
          }
        }
      )
  }

Может ли кто-нибудь, пожалуйста, дать мне представление о том, как показывать всплывающее окно или оповещение об успехе после этого._router.navigate([‘/home’])

Ответ №1:

Вам необходимо добавить всплывающее событие оповещения в метод ngOnInit компонента, который связан с маршрутом «/home».

Например: Если компонент Home связан с путем «/home» в маршрутизаторе вашего приложения как

{ путь: «домой», компонент: домашний компонент }

затем компонент «HomeComponent» будет инициирован во время навигации маршрутизатора к «/home». Следовательно, в методе ngOnInit «HomeComponent» добавьте функцию всплывающего окна с предупреждением для отображения предупреждающего сообщения.

Ответ №2:

Да, вы можете установить время ожидания:

   ngOnInit(): void {
    this._eventService.getSpecialEvents()
      .subscribe(
        res => this.specialEvents = res,
        err => {
          if( err instanceof HttpErrorResponse ) {
            if (err.status === 401) {
              this._router.navigate(['/home'])

        setTimeout(() => {
          window.alert('Unauthorized');
          }, 500);
            }

          }
        }
      )
  }

Комментарии:

1. Спасибо, это то, чего я хотел

Ответ №3:

Попробуйте это

В свой файл app.ts добавьте это

  ngAfterViewInit() {

     setTimeout(() => {
       if (this.router.url === '/home') {
         window.alert('welcome');
       }
     },1000)
  }

Ответ №4:

Там у вас есть большой выбор.

  1. Вы можете использовать оптимистичный подход, назовите свой тост или предупредите после navigation :
 this._router.navigate(['/home']);
alert('Navigated');
  1. Вы можете подписаться на события маршрутизатора, и когда навигация начинается с вашего компонента и заканчивается на вашем домашнем компоненте, вы можете отправить туда свое предупреждение.

В свой app.component вы можете добавить это:

 this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
 if (event.url.inlcudes('home')) alert();
});
  1. Вы можете использовать цепочку обещаний навигации маршрутизатора для обработки навигации в вашем компоненте:
 this.router.navigate(['/', 'home'])
    .then(nav => {
       window.alert('Home');
    }, err => {
      console.log(err) // when there's an error
    });

PS: Если вам интересно, как создать собственный тостер? Я бы посоветовал вам для начала использовать стороннюю библиотеку. ngx-тостр-хороший выбор.

Метки: ,