Angular，rooter导航后显示成功警报答案

【问题标题】：Angular, Show Success alert after rooter navigateAngular，rooter导航后显示成功警报
【发布时间】：2021-08-14 13:34:31
【问题描述】：

在我成功填写表单并重定向到 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'])
            }
          }
        }
      )
  }

谁能告诉我如何在 this._router.navigate(['/home'])

之后显示弹出窗口或成功警报

【问题讨论】：

标签： angular typescript bootstrap-4

【解决方案1】：

您需要在链接到路由“/home”的组件的ngOnInit方法中添加弹出警报事件。

例如：如果 HomeComponent 链接到应用路由器中的路径“/home”为

{ 路径：'home'，组件：HomeComponent }

然后组件“HomeComponent”将在路由器导航到“/home”期间启动。因此，在“HomeComponent”的 ngOnInit 方法中添加警报弹出功能以显示警报消息。

【讨论】：

【解决方案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);
            }

          }
        }
      )
  }

【讨论】：

谢谢，这就是我想要的

【解决方案3】：

试试这个

在你的 app.ts 文件中添加这个

 ngAfterViewInit() {

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

【讨论】：

【解决方案4】：

你有很多选择。

您可以使用乐观的方法在navigation 之后呼叫您的祝酒词或警报：

this._router.navigate(['/home']);
alert('Navigated');

您可以订阅路由器事件，当导航从您的组件开始并在您的主组件结束时，您可以在那里发出警报。

您可以在app.component 中添加以下内容：

this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
 if (event.url.inlcudes('home')) alert();
});

您可以使用路由器的导航承诺链来处理组件中的导航：

this.router.navigate(['/', 'home'])
    .then(nav => {
       window.alert('Home');
    }, err => {
      console.log(err) // when there's an error
    });

PS：如果您想知道，如何创建自定义烤面包机？我建议您使用 3rd 方库作为开始。 ngx-toastr 是个不错的选择。

【讨论】：