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

SOURCE（来自文章的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 guards是迁移OnActivation逻辑的最佳位置，而不是某种警卫。

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

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

3 个答案: