angular - 在 Angular 2 中解析一个值 *before* 激活一个路由

Question

只要 promise 尚未解决，我就想阻止访问路由。另外，我想将该 promise 的返回值传递给路由组件。

Several posts所以建议使用 OnActivate为此的接口(interface)。 documentation说:“如果 routerOnActivate 返回 promise ，路由更改将等到 promise 解决以实例化和激活子组件。”听起来很完美，只是路由仍然会立即被激活...(是因为等待 promise 的是 Route2 的子组件，而不是 Route2 组件本身？？)

参见 https://plnkr.co/edit/ipKrOgfRj0vKk8ZejH5v?p=preview . Route2 组件实现了 OnActivate界面，但是当您单击 Route2 链接时，Route2 组件会立即激活。但是，URL 会更新为 /route2只有在 promise 解决之后。 (在单独的窗口中启动 Plunker 以了解我的意思。)现在我不太关心 URL，Route2 组件根本不应该实例化，直到 promise 得到解决。

我的另一个策略是使用 @CanActivate装饰器。它更符合我的目的，因为“它由路由器调用以确定是否可以将组件实例化为导航的一部分”。

这里的问题是如何从 @CanActivate 中的 promise 传递数据组件的装饰器?

我见过有人将他们的数据写入 next 的属性中装饰器的参数，并在 next 中检索它routerOnActivate 的参数方法。

例如 next.params ( here ):

@CanActivate((next) => {
  return messageService.getMessage()
      .then((message) => {
         next.params.message = message;
         return true;
      });
})
export class MyComponent implements OnActivate {
  routerOnActivate(next) {
    this.message = next.params.message;
  }
}

或在next.routeData.data (here)。

但是documentation说 ComponentInstruction 对象“应该被视为不可变的”。这令人困惑。

这是最好的方法吗？

也许当前状态下的路由器尚未最终确定，当发布稳定的 Angular 2 时会有更好的方法？

Answer 1

更新

这是在新路由器中实现的 >= RC.4

import { Injectable }             from '@angular/core';
import { Router, Resolve,
         ActivatedRouteSnapshot } from '@angular/router';
import { Observable }             from 'rxjs/Observable';
import { Crisis, CrisisService } from './crisis.service';
@Injectable()
export class CrisisDetailResolve implements Resolve<Crisis> {
  constructor(private cs: CrisisService, private router: Router) {}
  resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
    let id = +route.params['id'];
    return this.cs.getCrisis(id).then(crisis => {
      if (crisis) {
        return crisis;
      } else { // id not found
        this.router.navigate(['/crisis-center']);
        return false;
      }
    });
  }
}

• https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard
• https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
• https://angular.io/docs/ts/latest/api/router/index/Routes-type-alias.html

原创

Maybe the router in its current state isn't finalized and there will be a better way when a stable Angular 2 is released?

其实是这样的。最近有很多关于进一步进展的讨论，并计划进行一些更改。

另见
- Angular Weekly Meeting (4 月 4 日)
- Router: Design for routerCanActivate, an injectable alternative to @CanActivate

I have seen people write their data into a property of the next parameter of the decorator, and retrieve it in the next parameter of the routerOnActivate method.

据我所知，参数应该是不可变的，不应修改。

[router] CanActivate and DI 中的讨论展示如何将 DI 与 CanActivate 结合使用。这是我会使用的方法。全局共享服务并将其注入(inject) CanActivate 以更新值并将其也注入(inject)到您想要访问该值的组件中。