在 Angular 2 中激活路由之前解析一个值

Question

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

Several posts on SO 建议为此使用OnActivate 接口。 documentation 说：“如果 routerOnActivate 返回一个承诺，路由更改将等到承诺解决后才实例化并激活子组件。”听起来很完美，只有路由仍然会立即被激活...（是不是因为等待承诺的是 Route2 的 子组件，而不是 Route2 组件本身？？）

见https://plnkr.co/edit/ipKrOgfRj0vKk8ZejH5v?p=preview。 Route2 组件实现了OnActivate 接口，但是当你点击Route2 链接时，Route2 组件立即被激活。但是，只有在 promise 解决后，URL 才会更新为 /route2。 （在单独的窗口中启动 Plunker 以了解我的意思。）现在我不太关心 URL，Route2 组件在承诺解决之前根本不应该实例化。

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

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

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

例如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

原创

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

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

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

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

AFAIK 参数应该是不可变的，不应修改。

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