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

【问题标题】：How do I make a dialog pop up in angular without redirecting to another component/page?如何在不重定向到另一个组件/页面的情况下以角度弹出对话框？
【发布时间】：2019-12-05 05:46:44
【问题描述】：

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

【问题讨论】：

使用按钮点击事件打开mat-dialog。这样当对话时，如果按是，则导航到新页面，或者如果按否，则留在同一页面上，其简单用例
@GaurangDhorda 感谢您的快速响应，但您能否详细说明一下？
stackblitz.com/edit/angular-mat-dialog 点击此处查看此 stackblitz 链接
我不太明白。我已经尝试使用（单击）事件，但这仅适用于链接，并且不会将 URL 更改为“/messages”。目前我已将其更改为路由器链接，但这就是我所说的问题。
我知道这一点，但这不是我要说的。具体来说，我的对话框实际上是一个消息传递组件。类似于 Quora 在他们的网络应用程序上的方式。

标签： angular typescript dialog

【解决方案1】：

您可以在StackBlitz Link 中找到完整的工作示例

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

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'}
  ])

【讨论】：

谢谢，这几乎正是我正在寻找的东西，但目前我正在改变它以完全满足我的需要。但问题是我不希望它请求许可。当用户在 URL“/messages”中搜索时，我只想弹出对话框，无论他们在哪个页面上，并希望它在他们关闭对话框时访问他们的消息时保持在同一页面上。
我已经这样做了，但现在我很难保持在同一页面上。对于 if-else 语句，我决定关闭 else 并尝试使用位置实际返回到最后一页，但对话框立即起飞......而不是导航到另一条路线，我想留在原地.
在此处分享您的分叉 stackblitz 链接
我没有改变太多，只是对话框而已。我的重点不是点击任何链接。我只关注客户端在 url 中搜索的时间。当我输入网址时，我发现我无法走“生成”路线，这很奇怪。我们从主页开始，现在当我在 url 中搜索“生成”时，我希望在我仍在“主页”路线中时弹出该对话框。 stackblitz.com/edit/angular-mat-dialog-kjdp51
这是那个，对不起，不是上面那个。我认为更改已保存angular-mat-dialog-kjdp51.stackblitz.io/Home 因此，当您单击“选择一个”并单击“创建”时，它会将您带到“生成”路线并打开对话框。我希望客户端在“生成”网址中搜索时触发相同的对话框，但始终停留在“主页”路线上。我真的很抱歉我把它带到了这么远。非常感谢你帮助我。

【解决方案2】：

您想要的行为类型可以使用Route guard 来实现。根据您从 Route guard 的回复，您可以显示包含相关消息的弹出窗口。

注意：添加工作代码...

【讨论】：