@angular/router 3.0.0-alpha.3：如何迁移 OnActivate答案

【问题标题】：@angular/router 3.0.0-alpha.3: How to migrate OnActivate@angular/router 3.0.0-alpha.3：如何迁移 OnActivate
【发布时间】：2023-04-05 20:40:02
【问题描述】：

我刚刚将@angular/router 升级到 3.0.0-alpha.3。但是，我找不到 2.0.0-rc.1 中可用的接口 OnActivate。任何提示表示赞赏。

【问题讨论】：

标签： angular router

【解决方案1】：

因为我们还没有文档并且将在接下来的几周内推出。你想要一个提示。这是我为你找到的。看起来您必须传递一个额外的参数并指定一个类来处理生命周期挂钩？

import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent }   from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailGuard }     from './crisis-detail.guard';

export const CrisisCenterRoutes = [
  {
    path: '/crisis-center',
    component: CrisisCenterComponent,
    index: true,
    children: [
      { path: '', component: CrisisListComponent },
      { path: ':id', component: CrisisDetailComponent, canDeactivate: [CrisisDetailGuard] }
    ]
  }
];

然后 CrisisDetailGuard 看起来像：

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

import { CrisisDetailComponent } from './crisis-detail.component';

@Injectable()
export class CrisisDetailGuard implements CanDeactivate<CrisisDetailComponent> {

  canDeactivate(component: CrisisDetailComponent): Observable<boolean> | boolean {
    return component.canDeactivate();
  }
}

我猜你可以用 canActivate 生命周期钩子做同样的事情。此外，这看起来像是在我们的生命周期钩子中绕过我们的 DI 的解决方案。所以看起来我们没有使用 Brandon Roberts DI hack :)

看看 Victor Savkin 对他们一直在研究的新路由的深入概述： http://victorsavkin.com/post/145672529346/angular-router

来源（文章中的 plnkr .. 目前已过时）： http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

编辑：上传突出显示的代码以匹配 router.rc3

【讨论】：

不可能“CanActivate”应该是放置“激活”逻辑的地方。我也不能把它放在 OnInit 中，因为它可能会被重复使用！

【解决方案2】：

我个人不相信 CanActivate 和 Deactivate 守卫是迁移不是某种守卫的 OnActivation 逻辑的最佳位置。

也许新的路由器事件是一个更好的选择：How to use NavigationStart

【讨论】：

【解决方案3】：

有 v3 的路由器指南作为 alpha 可用 https://angular.io/docs/ts/latest/guide/router.html，应该解释它们。

如果您转到https://angular.io/docs/ts/latest/guide/router.html#!#milestone-4-query-parameters 并稍微向上滚动，就会有一个示例可以演示它：)

【讨论】：