Angular 8在导航开始之前取消或做某事

Question

我有一个场景，我有一条路线
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
在 Controller 中，我想取消基于值的路由导航。

export class HeroListComponent implements OnInit {
 cancelRoute : boolean = true

  constructor(
   //some logic where before the route is navigated to, I want it to cancel the route
   // and log a message to console
   //console.log('successfully, canceled route');
  ) {}

编辑

我不希望通过 Route Guard 完成此操作，我希望在组件级别完成此操作。我在页面上有一个组件，我想取消路线导航。

这是我的用例。

我有一个包含多个组件的页面，如果有人离开该页面，我想检查组件 A 并确保在他们离开之前没有任何未保存的数据。

编辑 2

"I do not want this done through a Route Guard". Why? This is essentially what the CanDeactivate guard exists for. You can definitely use it for your use case with ease.

纠正我如果我错了，但我需要将 CanDeactivateGuard 放在每条路线上，例如

RouterModule.forRoot([
  {
    path: 'team/:id',
    component: TeamComponent,
    canDeactivate: ['canDeactivateTeam']
  }

当只有 1 条路线时，我不想在每条路线上都有 CanDeactivate
有 foo里面的组件。

路线很多，只有一条路线需要 foo组件，他需要可以取消路由导航。据我所知 canDeactivate route gaurd 无法访问在路由上创建的组件。

编辑 3

NavigationStart文档声明这是一个被触发的事件。我可以 Hook 该事件，但我无法停止实际导航。除非我错了 NavigatonStart只是告诉我它何时开始导航而不是如何停止导航。

Answer 1

没有其他方法可以防止在没有 DeactivateGuard 的情况下进行导航，但是!你可以让他注入(inject)。

import { CanDeactivate } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { Injectable } from '@angular/core';

@Injectable()
export class DeactivateGuard implements CanDeactivate<HomeComponent> {

    canDeact = true

  canDeactivate() {
    return this.canDeact
  }
}

您可以将其注入(inject)您想要的任何组件并更改 canDeact为 false ，因此您可以防止在工作未完成时导航到其他路线。尽管如此，默认 canDeact是真的，所以如果在你的 route 没有组件 foo with 将触发 ngOnInit 使守卫为假并防止导航出去。
所以像上面一样保护并在路由中设置canDeactivate:

{
    path: 'team/:id',
    component: TeamComponent,
    canDeactivate: [DeactivateGuard]
}

因为它是可注入(inject)的，所以在一些根模块中提供它:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    DeactivateGuard
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

假设，有时 foo 组件将在 TeamComponent 中。就在 foo 组件中:

export class FooComponent implements OnInit {

  constructor(private deactGuard: DeactivateGuard) { }

  ngOnInit() {
    this.deactGuard.canDeact = false
  }

  jobDone() {
    this.deactGuard.canDeact = true
  }

}

尽量不要将 foo 组件粘贴到 TeamComponent 范围之外。或者在 ngOnInit 中正确地开发它，这样他就不会在任何时候使 canDeact 为假。