时间戳

首页 > 解决方案 > 如何在不重定向到另一个组件/页面的情况下以角度弹出对话框？

angular - 如何在不重定向到另一个组件/页面的情况下以角度弹出对话框？

问题描述

到目前为止，我已经有一个来自 angular/material（https://material.angular.io/components/dialog/overview）的工作对话框，它运行良好，但我想要做的是阻止客户端转到另一个页面当他们点击链接或在 URL '/messages' 中搜索时。例如，如果我在主页“/home”上，并且如果客户端在主页上搜索 URL“/messages”，我希望对话框弹出但留在主页上。链接也是如此，如果我在“/about”页面上并单击导航到“/messages”页面的链接，我想在对话框输出到浏览器时停留在“/about”页面上.

标签： angulartypescriptdialog

解决方案

您可以在此StackBlitz 链接中找到完整的工作示例

您可以使用保护服务来保护路由路径。创建路由保护并放置这样的代码..

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

   if (this.guardSerive.open()) {
     return true;
   }else{
     this._router.navigate(['/Home']);
   }
}

在您的服务中，您在警卫服务中有一个方法调用，像这样......

open(){
   let result = window.confirm('Are you sure want to move?')
   return result;
}

您在 app-routing.module.ts 中的路由路径是...

  RouterModule.forRoot([
     {path:'Home', component: ExampleComponent},
     {path: 'generate', component:GenerateComponent,
     canActivate: [HnResolver]},
     {path:'', redirectTo: 'Home', pathMatch: 'full'}
  ])

推荐阅读