嗨,
我注意到了一些奇怪的行为,当我工作在一个角度的项目。有一个要求具有可重用的自动保存功能,当用户试图使用表单从页面导航时会触发该功能。我们使用了一个警卫和一个指令的组合来实现这一点,这个指令可以应用于表单。
在这个指令中,我们正在决定是否允许用户导航,还是让他留在页面上--如果表单是有效的,我们将触发一个保存回调,并在回调完成后让用户离开,如果表单无效,我们会将用户保留在页面上。如果用户根本不与表单交互,那么让他们导航也是很重要的。翻译成代码如下所示:
if (form.dirty) {
if (form.valid) {
this.saveCallback().s
我有一个Angular2应用程序。它的一个组件实现了CanDeactivate界面,以确认用户在页面之外的导航。以下是路由保护的实现:
export class DeactivateGuard implements CanDeactivate<MyComponent> {
canDeactivate(component: MyComponent) {
let can = component.canDeactivate();
return can;
}
}
以下是组件的代码:
canDeactivate() {
if (confirm("Are you sur
我创建了一个CanDeactivate保护程序,它返回一个可观察的,并应用到一个组件中,该组件加载在内部嵌套的路由器出口中。当一个人试图导航到另一个url时,是否应该调用这个守卫?我这么问是因为这不是我的案子。
在我的例子中,守卫只会被调用第一个“不同”的URL。让我用一个例子来解释它。假设我总是返回false,并且尝试从同一个组件导航到不同的urls:
/A --> guard called
/B --> guard called
/B --> no navigation and no guard called
/A --> guard called
/A -->
我已经实现了使用角形式验证的掩体保护。如果用户单击ngForm字段。并尝试导航到不同的标签,用户将得到一个自定义确认弹出,这将说“放弃更改?”并返回真假。
这是我的护卫
import { NgForm } from "@angular/forms";
import { ComponentCanDeactivate } from './component-can-deactivate';
export abstract class FormCanDeactivate extends ComponentCanDeactivate {
abstract get f
我试图阻止导航,直到用户确认他们会丢失他们的更改,但我认为我不能在我的场景中使用路由保护。
以下是更改的检查:
public get hasChanged(): boolean {
return this.changeManager.hasChanged({
propA: this.propACtrl.value,
propB: this.propBCtrl.value,
// ETC, lots of other checks
});
}
class ChangeManager {
// bunch of propert
我正在尝试创建一个CanDeactivate防护,当用户导航离开路线时提示“保存更改”。有一些我想要排除的路由(比如当用户切换选项卡,但没有选择新项目时)。我一直在努力理解如何才能在不使用某种导航服务的情况下获得目的地URL,并只保留完整的URL。这是我对can停用的签名
// This is what handles the deactivate
public canDeactivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
所有“route”和“sta
我使用确认弹出要求用户在不保存更改的情况下验证他/她离开页面的操作。
为了在角7中实现这一点,代码是这样完成的:
ngOnDestroy() {
if (this.updateProfile) {
if (!window.confirm('Are you sure you wanna leave this page the changes may lost?')) {
this.router.navigate(['/dashboard/profile']); //Currently navigating to the sam