Angular2 - 防止 ngOnDestroy 发生答案

【问题标题】：Angular2 - Prevent ngOnDestroy from happeningAngular2 - 防止 ngOnDestroy 发生
【发布时间】：2017-12-15 02:36:58
【问题描述】：

我有一个页面，该页面有一个表单，可以在用户离开之前检查用户是否有未保存的更改。

问题在于，即使使用 preventDefault() 并返回 false，用户仍然可以点击离开组件。

有没有办法阻止 ngOnDestroy 或 click 事件的发生？

注意：用户不会转到不同的路线，只是来自同一组件的另一个选项卡。

ngOnDestroy() {
    if (this.myForm.dirty) {
        let save = confirm('You are about to leave the page with unsaved changes. Do you want to continue?');
        if (!save) {
            window.event.preventDefault();
            return false;
        }
    }
}

【问题讨论】：

您可以禁用导航离开而不保存更改的按钮。 ngOnDestroy 不是防止销毁发生的守卫，它只是在销毁组件之前执行一些逻辑，例如取消订阅 observables 或关闭文件...等。
您可能正在寻找身份验证守卫。
@torazaburo 我知道守卫只在路线上工作。我注意到用户仍然在同一条路线上，但点击到不同的选项卡。
@RaedKhalaf 我不认为禁用导航按钮在视觉上看起来不错。如果用户愿意，我宁愿让他们选择继续。
好的，那就不要禁用它，当用户点击导航离开而不保存的按钮时，只需添加'discard = confirm("Do you want to discard changes")'，如果discard是真正的导航走开，其他的不要导航走开。

标签： javascript angular

【解决方案1】：

你会想要使用 CanDeactivate 守卫。
这是一个例子：

1.创建一个守卫服务/提供者。

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {

  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }

}

2。在您的 app.module 提供程序中添加您的警卫服务 (CanDeactivateGuard)

providers: [
    CanDeactivateGuard,
]

3.更新您的路由，如下所示：

{
    path: "pipeline/:id",
    component: OnePipelineComponent,
    canDeactivate: [CanDeactivateGuard],
  },

4.在您想要阻止 ngOnDestroy 的组件中实现 canDeactivate 方法。在我的例子中，它是OnePipelineComponent，如上面的路线中所述。

canDeactivate() {
    console.log('i am navigating away');

    // you logic goes here, whatever that may be 
    // and it must return either True or False
    if (this.user.name !== this.editName) {
      return window.confirm('Discard changes?');
    }

    return true;
}

注意： 显然，只执行第 1 步和第 2 步一次，并且只需为您想要相同行为的每个其他组件重复第 3 步和第 4 步，这意味着，阻止 ngOnDestroy 或在 a 之前做某事组件可以被销毁）。

查看这些文章以获取代码示例和上面编写的代码的解释。 CanDeactivate & CanDeactivate Guard Example

【讨论】：

【解决方案2】：

您混合了两个概念 - 导航意味着前往新路线。正确的角度解决方案是实现 CanDeactivateGuard。上面的文档是here。

带有答案的堆栈溢出问题是here。

在您的情况下，用户没有导航到新页面（即路线不会改变）。他们只是点击一个新标签。

如果没有看到更多代码，很难知道两个选项卡是属于同一个表单还是属于两个不同的表单。

但是无论如何，您需要在另一个选项卡按钮上使用单击处理程序，并且在该单击处理程序中，您需要检查当前选项卡的数据是否未保存（即，如果该选项卡是一个单一表单，那么该表单是否脏？ )。

所以基本上将您从ngOnDestroy 发布的代码移动到该点击处理程序中。

【讨论】：