在*激活Angular 2中的路径之前解析值*

Question

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

SO上的几个帖子建议使用这个OnActivate接口.该文件说:"如果routerOnActivate返回一个承诺,路线变化将等到承诺平息实例化和启动子组件 ".听起来很完美,只有路线仍然会立即激活...(是因为它是Route2 的子组件会等待承诺,而不是Route2组件本身??)

请参阅https://plnkr.co/edit/ipKrOgfRj0vKk8ZejH5v?p=preview.Route2组件实现了OnActivate接口,但是当您单击Route2链接时,会立即激活Route2组件.但是,URL /route2仅在承诺解决后才会更新.(在一个单独的窗口中启动Plunker以查看我的意思.)现在我不太关心URL,在解决promise之前,Route2组件根本不应该实例化.

我的另一个策略是使用@CanActivate装饰器.它更适合我的目的,"路由器调用它来确定组件是否可以实例化为导航的一部分".

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

我看到人们将他们的数据写入next装饰器参数的属性,并next在routerOnActivate方法的参数中检索它.

例如在next.params(这里):

@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(在这里).

但是文档说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 每周会议（4 月 4 日）
- Router：routerCanActivate 设计，@CanActivate 的可注入替代方案

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

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

[路由器] CanActivate 和 DI中的讨论展示了如何将 DI 与CanActivate. 这就是我将使用的方法。全局共享服务并将其注入CanActivate以更新值，并将其注入到您想要访问该值的组件中。