问题标签 [candeactivate]

我正在尝试实施canDeactivate警卫。为此，我需要知道要导航到的路由的组件实例。

我想知道是否可以从 nextState 获取组件？我试过这样的事情：

nextState.root.component

但它返回AppComponent给我，因为这不是我要导航到的组件的名称。

我该怎么做呢？或者我应该以其他方式获得一个实例？

编辑：
我可以在 RouterStateSnapshot 内的浏览器的开发人员终端中看到组件实例（NextComponent）->

但无法在我的代码中获取它。

我已经使用常见的“我可以离开页面”对话框实现了一个 canDeactivate 守卫。在大多数情况下，它都有效。如果我确认，我可以留下一个页面，如果我取消，我可以留下。这里是警卫：

这里是当守卫调用指定组件中的方法时调用的canDeactivate方法

决策变量是您在下面看到的主题 navigateAwaySelection$，当它弹出并等待用户响应时，它会从我的自定义对话中接受真或假的发射，当他响应时调用接受方法，该方法调用接下来就通过用户判断真假的主题。

public acceptance(decision: boolean): void { this.navigateAwaySelection$.next(decision); }

因此，这在导航到典型视图时有效。但是有一种极端情况，当我们想确认离开页面时，我们不得不在弹出的对话框上单击两次。这种情况是当我们尝试访问由 canActivate 保护的页面时，如果在桌面上，该保护将重定向到第二个页面，在这种情况下，我们运行 navigateByUrl 进行重定向。

导航跟踪器显示我们进入注册/手册（预期页面）页面，但实际上屏幕快速闪烁，我们回到了对话和原始页面，再次点击离开页面终于让我们到达目的地。就像第一次导航被取消只是第二次被接受一样，请记住 canDeactivate 保护是在其自己的功能模块文件夹中的指定组件路由中声明的，因为我正在使用延迟加载的模块功能，如果我尝试添加它到全局路由列表，canDeactivate 防护中的“组件”变为空。有关这方面的更多信息，请参阅https://github.com/angular/angular/issues/16868。

canDeactivate guard > canActivate guard > canDeactivate guard > canActivate guard > 到达预期页面。

有没有办法解决这个问题，这样我只需要在离开页面上单击一次，就像在其他页面中一样？

角度示踪剂

// 单击链接以导航离开时的跟踪器结果

//点击离开一次后

第二次点击离开后

也许这是罪魁祸首：

• 这个例子看到的例子

这是我的 canDeactivate Guard：

这就是我在 HomeComponent 路由中的称呼：

在 MyService 中，我有这个主题：

在另一个组件中，FiltersComponent，我有这个功能：

在 HomeComponent 中，我像这样调用 canDeactivate：

在 appModule 中：

...

问题陈述：

currentBackButtonEnabled 始终为 true，即使用户（单击）openFilters() 函数，其中 currentBackButtonEnabled 变为 false

我有一个应用程序，它有一个 iframe 到一个单独的 Angular 应用程序中。iframe 的 src 是一个组件。长话短说，Angular 应用程序必须重定向到主页，然后返回到 src 中的组件。如果我在光标位于 iframe 中时使用鼠标上的后退按钮，Angular 应用程序会返回到主页（因为它从那里重定向）。所以，为了防止这种情况，我把这个守卫放在组件的路由上。

控制台未记录消息，应用程序仍在返回主页。

更新

我注意到，即使直接在其自己的页面上（而不是在 iframe 中）点击组件时，当单击后退按钮时，CannotDeactivateGuard 也不会触发。

我用 CanDeactivate 创建了一个路由守卫，它确定用户是否可以在有任何未保存的更改时离开页面，如果存在任何未保存的更改，则触发 MatDialog 模式。我查看了很多指南和类似的线程，并且我的代码正在运行（大部分情况下）。见下文：

这是路由守卫，它调用组件的 confirmRouteChange 函数，如果它有一个，并返回结果，一个Observable<boolean>：

这是confirmRouteChange的实现，它只是在表单脏时打开MatDialog并返回通知对话框何时关闭的Observable：

这是我的模态保存/关闭选项的实现：

所以这是我的问题：当我导航未保存的更改时，模式弹出（很好），应用程序根据模式中选择的选项正确导航（很好）；但是，在模式后面，我可以看到我的应用程序的其余部分导航离开页面，除了放置路由保护的组件。因此，如果我尝试导航到主页，我可以看到所有主页和未保存更改形式的组件。就好像它开始导航，停止，然后等待用户的响应。如果我使用本机confirm()对话框，它可以完美运行，这意味着应用程序在等待用户响应时会有效冻结。我相信这是因为如果我记录confirm()返回的内容，则在用户选择某些内容之前它不会返回任何内容。另一方面，dialogRef.afterClosed()立即返回 Observable，我猜这会触发导航，然后应用程序停止并等待用户的响应。

我认为我对模态的使用有问题，但我不确定是什么。任何帮助是极大的赞赏！

编辑：我认为该return dialogRef.afterClosed()语句在对话框完成打开之前执行，导致导航开始然后停止。

我无法从异步代码中捕获 matDialog 响应。下面是显示我的实现的代码片段。

守卫.ts

但是此代码无法在对话框中获取用户操作的输入。我找不到可能是什么问题以及如何在异步代码中处理 matDialog 。我很想得到任何关于如何处理这种情况的意见。

注意：这是非常通用的代码示例，而不是实际代码。如果您需要额外信息来理解场景，请发表评论。

提前致谢。

目前，我在一个 HTML 页面上做一些事情。如果我错误地单击了另一个页面，那么它将重定向到该页面而无需任何用户确认。

这是我的组件。

第一，我得到确认，但已经导航到点击的页面rouetlink。

在 2 中，我看不到用户确认。

如果他们试图离开他们对表单进行更改的页面，我想在屏幕上向用户显示提示。到目前为止，我已经创建了一个 Guard，并成功地让它在用户离开此页面时在控制台中记录一些内容。但是现在，我需要显示一个Dialog警告他们的框，他们应该能够取消“导航”或确认他们希望导航离开。

我的组件中有一个方法，其中包含检查是否对表单进行了更改的表单，现在我只需要实现上述其余部分。

这是我的后卫：

我已经在我的内部实现了我的组件的保护app-routing-module.ts：

因此，如果用户在导航发生之前对 I need to show a dialog box 中的表单进行了更改，则UserEditorComponent我已经拥有此对话框的组件，我在应用程序的不同部分中使用了该组件。

谢谢