Angular 2 Router - 应用程序起始页的路由答案

【问题标题】：Angular 2 Router - routing for start page of an applicationAngular 2 Router - 应用程序起始页的路由
【发布时间】：2016-11-15 15:31:00
【问题描述】：

我刚刚将 Angular2 升级到最终版本，我正在寻找一种很好的方式来进行跟踪。

我有一个起始页，它在开始时显示一组用户，该组通过访问 REST 服务而已知。

我去 www.app.com - Angular 应用程序启动，它检索应该显示的组。此时我希望应用程序转到 www.app.com/group/group1 - 但在检索组名称之前，angular 已经尝试导航并抛出异常，因为它没有找到路线。

我想出了 2 个技巧：

make '' route 转到 GroupSelector 组件，并在解析组名称后从那里导航，这很糟糕，因为我真的想在另一个组件上启动我的应用程序
等待组名，然后使用 Router.navigate 导航，这会引发异常，因为未找到路由，即使应用正常运行

使用以前版本的 Angular2 路由器（beta 1），我启动了像 www.app.com 这样的应用程序 - 应用程序被加载，它检索组的名称，然后使用 Router.navigate 应用程序将加载组组件并提供正确的这个组件的组名参数，一切正常

有什么方法可以延迟路由器，只有在从 REST 服务检索到必要的数据后才重定向到正确的路由？

【问题讨论】：

在订阅HTTP get返回时，执行一个this.router.navigate['myRoute'];

标签： angular angular2-routing

【解决方案1】：

在路由器配置文件中使用解析属性

// team.resolve.ts
@Injectable()
class TeamResolver implements Resolve<{}> {
  constructor(private http: Http) {}
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.http.get("/api/team/" + route.params.id);
  }
}

// app.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

【讨论】：