有什么方法可以防止损坏角度组件？

Question

我们知道在angular中有一个ngOnDestroy（）方法可以在销毁组件时运行，但是我想知道有什么方法可以防止销毁它？

Answer 1

CanDeactivate防护可以访问活动组件的实例，因此您可以实现hasChanges（） ，以检查是否已进行更改并有条件地在离开前要求用户确认。 在下面的示例中， CanDeactivateComponent实现了hasChanges （）方法，该方法返回一个布尔值，该值指示组件是否检测到任何更改。 CanDeactivate保护的实现类似于CanActivate保护的实现（您可以创建一个函数或实现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 {}

您可以有多个保护单个路径的防护，这可以帮助您实现复杂的用例，其中需要一系列不同的检查。