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

Question

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

Answer 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

Answer 2

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

也许新的路由器事件是更好的选择：如何使用 NavigationStart