问题标签 [candeactivate]

让我们考虑组件结构：

appComponent > router-outlet (A, B, C) > a, b, c （根据选择一个），其中： A, B, C：动态加载a, b, c（动态组件加载器） a, b, c :动态加载的组件

本练习的目的是能够为不同的寄存器（假设用户）提供组件 a、b、c 的版本，因此我在每个表单 a、b、c 中输入的信息始终在每个用户的内存中可用。

我正在使用路由器插座显示一个 ViewContainerRef，它创建“子路由”组件的实例，这意味着，如果我想要路由a、b、c，那么我使用A、B、C 将它们加载到路由器插座中作为仅具有 ViewContainerRef 的组件，然后在每个组件中分别加载动态组件a、b、c（如果之前未创建，它们将存储在集中式服务中），在离开路由之前，我实现 canDeactivate 以分离ViewContainer 中的当前视图，因此a、b、c的组件实例永远不会被破坏，当我为某个用户返回该特定路线时，我可以将它们插入到加载器上。

这是一个正确的方法吗？或者我不应该将动态组件加载器与路由器插座混合在一起吗？

更新：如果我想在 a、b、c 中再多一个路由器插座，将我带到 c、d 怎么办？我遇到了问题，因为它似乎无法识别放置在 a、b、c 上的路由器插座，因此不显示动态组件加载器 C、D

我已经使用角度表单验证实现了 candeactivate 保护。如果用户单击 ngForm 字段。并尝试导航到不同的选项卡，用户将收到一个自定义确认弹出窗口，其中会显示“放弃更改？”并返回真或假。

这是我的表格守卫

组件保护

现在这是我的确认弹出代码。我的问题是，如果我使用默认的 confirm() 方法（下面代码中的注释行），它会弹出窗口，并询问是或否，这很完美。但是如果我在这里使用自定义材质弹出窗口，我必须订阅 afterclose() 方法，该方法异步执行，而我必须等到该方法执行后才能继续。我怎样才能做到这一点？

从模态我返回“OK”，如下所示

}

任何帮助表示赞赏。

编辑 ：

我在我的组件中扩展了 formdeactivate

Stackblitz 链接：https ://angular-custom-popup-candeactivate.stackblitz.io

我无法在 Ionic 5 中实现 canDeactivate 防护。以下是我的代码。

模型.ts

离开page.guard.ts

测试页.ts

家庭路由.Module.ts

离开时出现以下错误TestPage。我尝试LeavePageGuard在 App Module 和 TestPage Module 中添加作为提供程序，但仍然遇到相同的错误。

大家好，我是 Angular 的新手，并使用以下教程链接学习这些东西。由于某种原因， canDeactivate 路由保护似乎不起作用。当我尝试检查很多事情但没有任何工作时，任何帮助将不胜感激。我有最新的角度 CLI，并且我的代码中没有错误，并且由于某种原因，在路线更改期间根本没有调用 canDeactivate 函数。

我在 CreateEmployee 路线上应用该功能，因此当我为 createEmployee 填写表格并尝试导航到不同的路线时，它应该会启动。

create-employee-component.html：在这里，我的表单元素很少

创建员工组件.ts

创建员工可以停用guard.service.ts

应用程序路由.module.ts

根据我在 StackOverflow 上找到的其他一些答案，我觉得一切都是正确的。请让我知道我在这里做错了什么。我也在这里发布了我的代码。

我的 Ionic 5 应用程序有以下 3 个页面和导航路径

UserPage canDeactivate 方法：

在 UserPage 中，当我选择“是”时，在后退按钮上它工作正常并将我带回主页。

1. 当我选择“否”时，canDeactivate 方法返回 false 并且 UserPage 保持打开状态。
2. 然后我单击“共享”按钮导航到 SharePage。 分享页面成为根页面并且没有返回按钮

感谢您事先提供帮助。我正在尝试将 canDeactivate 函数与 NgbModal 一起使用。这意味着，我想返回的值取决于 NgbModal 的返回。

我已经看到它与 comfirm alert 一起使用，但它无法与 NgbModal 一起使用。这是我的代码，console.log(rtn) 打印“未定义”。我明白为什么，但不知道如何将 NgbModal 连接到 canDeactive()。请帮帮我！

感谢您花时间在这里。

所以我对canDeactivate没有什么问题。我做了一个页面如果我点击返回按钮，将会出现一个模式，用户可以选择是否退出该页面。如果我只点击一次，效果很好。但问题就在这里。假设我位于 [page A -> page B -> page C] 并且在页面 C 上，我放置了 canDeactivate。因此，如果我在单击返回时单击模态上的确定，它会很好地移动到页面 B。但是，如果我先在 Modal 上单击 Cancel 并再次单击 go-back，当我单击 Ok 时，它会移动到页面 A。当然，每当我调用 canDeactivate 时，无论我在 modal 上单击什么，它都会像它已经移动一样。

所以我想做的就是无论我调用canDeactivate多少次，当我在模态上单击“确定”时，我想移动到页面B。希望你们都有我的解决方案。

canDeactivate.文件

页 C. 文件

在我的 Ionic 5 应用程序中，我有以下导航路径。

我已经为 PageA 实现了 CanDeactivate 保护。

当用户在保存之前编辑某些内容并按下后退按钮时，我会弹出一个弹出窗口以确认用户是否要离开。

为了继续前进，PageB我正在使用boolean byPassNav. 我在前进之前将此值设置为 TRUE 并且方法canPageLeave正在返回TRUE。

除以下情况外，前向导航在一种情况下不起作用。

这会将导航移动到pageB但也会使页面成为根页面并删除所有路由历史记录。PageB在这个流程之后我无法回头。

编辑：添加代码isDeactivatable

我在 app-routing 模块中使用以下路由：

我的问题是canDeactivate只触发一次，从/overview到/overview/edit。我理解那部分，因为路由内部的孩子的路径。

我的问题是，canDeactivate当 queryParams 在edit路径内发生变化时触发触发的正确解决方案是什么？例如，将 url 从 更改/edit?id=1为/edit?id=2也应该触发canDeactivate。

是否有可以从路由模块内部实现的简单解决方案？
如果没有，你有什么建议？
请记住，我仍在学习角度。

如果表单很脏，我想防止用户离开当前页面。虽然这适用于 CanDeactivate 保护，但问题是当我尝试移动到同一父级的另一个子组件时，没有更改路由。这两种情况的唯一共同点是，在这两种情况下，ngOnDestroy() 都会被命中。但是，不幸的是，在 ngOnDestroy 中打开确认对话框（mat-dialog）并不能阻止导航在后台发生。有没有可能的解决方案？