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

Question

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

Answer 1

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

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

Answer 2

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

如果你转到 https://angular.io/docs/ts/latest/guide/router.html#!#milestone-4-query-parameters 并稍微向上滚动，有一个例子可以证明它:)

Answer 3

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

也许新的路由器事件是更好的选择：

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

@angular/router 3.0.0-alpha.3: How to migrate OnActivate

router

angular