Question

我在angular2中有一个表单。如果它是脏的（未保存的更改），我想限制用户导航。

研究表明，canDeactivate路线保护是这样做的。

Google引导我this github file，这似乎实现了我想要的目标。

import { CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';

export interface FormComponent {
    form: FormGroup;
}

export class PreventUnsavedChangesGuard implements CanDeactivate < FormComponent > {
    canDeactivate(component: FormComponent) {
        if (component.form.dirty)
            return confirm('You have unsaved changes. Are you sure you want to navigate away?');

        return true;
    }
}

现在，我已将此服务放入我的项目中，将其注入我的表单组件中，然后将其添加到我的路由模块中......

const routes: Routes = [{
    path: '',
    loadChildren: 'app/main/main.module#MainModule',
    canActivate: [AuthenticationGuard],
}, {
    path: 'login',
    component: LoginComponent,
    canDeactivate: [PreventUnsavedChangesGuard]
}, ]

并将其包含在app模块的提供者数组中。

现在，似乎有效。如果我在单击浏览器的后退按钮时有未保存的更改。我收到了确认对话框。但是，当我在地址栏中输入新网址时，我没有收到确认。此外，当我有未保存的更改时，我可以关闭标签页。

是canDeactivate的这些已知限制，还是我做错了什么。我如何得到我想要的行为？（如果用户尝试关闭标签或使用地址栏导航，确认对话框？）

Angular2路由：canDeactivate限制

0 个答案: