Angular2中如何在Flash消息消失后实现页面重定向？

嘿，我太懂你的困扰了！现在你的代码里，重定向是和Flash消息同时触发的，用户刚看到提示框就被跳走了，完全来不及确认成功状态对吧？这里有两种实用的解决办法，你可以按需选择：

方法一：用setTimeout同步等待消息超时 #

既然你给Flash消息设置了timeout: 5000（也就是5秒后自动消失），那我们直接把重定向代码放进setTimeout里，让它等5秒再执行，完美对齐消息消失的时间：

submitPost(value: any) {
  this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
    data => {
      this.responseStatus = data;
      if (this.responseStatus.status == 1) {
        localStorage.setItem('admin_id', this.responseStatus.detail.id);
        const messageTimeout = 5000; // 把超时时间抽成变量，以后改值只需要动这一处
        this._flashMessagesService.show(this.responseStatus.message, { 
          cssClass: 'alert-success', 
          timeout: messageTimeout 
        });
        // 等待消息消失后再执行跳转
        setTimeout(() => {
          top.location.href = 'admin/dashboard';
        }, messageTimeout);
      } else {
        // 补全错误提示的样式，你原来的代码这里没写完
        this._flashMessagesService.show(this.responseStatus.message, { 
          cssClass: 'alert-danger', 
          timeout: 5000 
        });
      }
    },
    // 别忘了加错误处理，避免请求失败时没有任何提示
    error => {
      this._flashMessagesService.show('登录请求失败，请稍后重试', { 
        cssClass: 'alert-danger', 
        timeout: 5000 
      });
    }
  );
}

这种方法简单直接，不需要额外依赖，适合大多数场景。

方法二：利用Flash消息库的关闭回调（更灵活） #

如果你的_flashMessagesService支持关闭回调（很多Angular的Flash消息库都提供了onClose/onHidden这类钩子），那用这种方法体验会更好——不管是等超时自动关闭，还是用户手动点击关闭消息，都会立刻触发重定向：

submitPost(value: any) {
  this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
    data => {
      this.responseStatus = data;
      if (this.responseStatus.status == 1) {
        localStorage.setItem('admin_id', this.responseStatus.detail.id);
        this._flashMessagesService.show(this.responseStatus.message, { 
          cssClass: 'alert-success', 
          timeout: 5000,
          // 不同库的回调命名可能不同，比如callback/onClose，记得查下文档
          onClose: () => {
            top.location.href = 'admin/dashboard';
          }
        });
      } else {
        this._flashMessagesService.show(this.responseStatus.message, { 
          cssClass: 'alert-danger', 
          timeout: 5000 
        });
      }
    },
    error => {
      this._flashMessagesService.show('登录请求失败，请稍后重试', { 
        cssClass: 'alert-danger', 
        timeout: 5000 
      });
    }
  );
}

这种方式更贴合用户操作习惯，用户不想等5秒的话，手动关掉提示就能立刻进入仪表盘，不用傻等超时。

另外提个小建议：如果是Angular项目，尽量别用top.location.href做跳转，推荐用官方的Router服务，这样不会整页刷新，更符合单页应用的规范：

// 先在组件构造函数里注入Router
constructor(private router: Router) {}

// 把跳转代码改成
this.router.navigate(['/admin/dashboard']);

内容的提问来源于stack exchange，提问作者Saswat