有啥方法可以防止以角度破坏组件？

Posted 2023-02-23

【中文标题】有啥方法可以防止以角度破坏组件？

【英文标题】：Is there any way to prevent destroying a component in angular?有什么方法可以防止以角度破坏组件？

【发布时间】：2018-07-08 22:31:32

【问题描述】：

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

【问题讨论】：

你能解释一下你到底在做什么吗？看起来像一个 XY 场景......

你能指定任何场景吗

canDeactivate 路由器保护

这样做并不明智，因为它有助于解决任何内存泄漏问题。如果您创建了任何东西，并且它不应该在其他路线上，那么就像某些订阅一样，这是在ngOnDestroy() 中销毁它的明确候选者。

查看这个 *** 答案以获得详细的代码示例。 ***.com/a/62409873/4109794

【参考方案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 

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