有什么方法可以防止以角度破坏组件？答案

【问题标题】：Is there any way to prevent destroying a component in angular?有什么方法可以防止以角度破坏组件？
【发布时间】：2018-07-08 22:31:32
【问题描述】：

我们知道 Angular 中有一个方法 ngOnDestroy() 可以在销毁组件时运行，但我想知道有什么方法可以防止它被破坏？

【问题讨论】：

你能解释一下你到底在做什么吗？看起来像一个 XY 场景......
你能指定任何场景吗
canDeactivate 路由器保护
这样做并不明智，因为它有助于解决任何内存泄漏问题。如果您创建了任何东西，并且它不应该在其他路线上，那么就像某些订阅一样，这是在ngOnDestroy() 中销毁它的明确候选者。
查看这个 StackOverflow 答案以获得详细的代码示例。 stackoverflow.com/a/62409873/4109794

标签： angular typescript

【解决方案1】：

CanDeactivate 守卫可以访问活动组件的实例，因此您可以实现一个 hasChanges() 来检查是否有更改并有条件地请求用户离开前确认。在以下示例中，CanDeactivateComponent 实现了方法 hasChanges()，该方法返回一个布尔值，指示组件是否检测到任何更改。 CanDeactivate 守卫的实现类似于 CanActivate 守卫 implelementaion（您可以创建一个函数，或者一个实现 CanDeactivate 接口的类）：

import { CanDeactivate } from '@angular/router';
import { CanDeactivateComponent } from './app/can-deactivate';

export class ConfirmDeactivateGuard implements CanDeactivate<CanDeactivateComponent> 
{
  canDeactivate(target: CanDeactivateComponent) 
  {
    if(target.hasChanges()){
      return window.confirm('Do you really want to cancel?');
    }
    return true;
  }
}

尽管这是一个非常简单的实现，CanDeactivate 使用的是泛型，因此您需要指定要停用的组件类型。

在组件的Angular路由器中：

{ 
  path: '',
  component: SomeComponent,
  canDeactivate: [ConfirmDeactivateGuard]
}

最后，与 Angular 上的所有其他服务一样，需要相应地注册此守卫：

@NgModule({
  ...
  providers: [
    ...
    ConfirmDeactivateGuard
  ]
})
export class AppModule {}

您可以让多个守卫保护单个路由，这有助于您实施复杂的用例，其中需要一系列不同的检查。

【讨论】：