是否有一个如何在Angular 2应用程序中构建动态路由的示例?

时间:2016-11-30 18:42:34

标签: angular typescript angular2-routing

如果您遵循角度教程,路由似乎以下列方式完成:

RouterModule.forRoot([
  {
    path: 'heroes',
    component: HeroesComponent
  }
])

此时还可以执行一些其他操作,具体取决于应用程序的大小,例如将路径数组移动到单独的文件/类中。

但我想要实现的是能够在Angular应用程序启动时加载这些路由。所以期望的流程就像:

  • 加载index.html
  • 其中一个步骤是从休息服务加载菜单。这里假设菜单知道Angular应用程序的组件。
  • 此休息服务呼叫的响应将用于为应用程序创建所有所需的路由。

因此,此处所需的行为是更改角网址路由,以便此应用程序可以适应本地化(英语 - >法语)或域更改(零售 - >财务),因为此应用程序的性质是这样的在给定正确配置的情况下,它可以应用于不同的域。

这一切都可能吗?如果是,那么我完全坚持如何解决这个问题。

根据我目前的理解,实现此目的的一种方法是在应用程序的引导阶段之前或期间进行此服务调用?

1 个答案:

答案 0 :(得分:3)

是的,您可以重置路线。

查看官方文档:https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchor

constructor(private _router: Router) {}

yourFunctionToResetTheRouter() {
   this._router.resetConfig([
      { path: 'team/:id', component: TeamCmp,
         children: [
            { path: 'simple', component: SimpleCmp },
            { path: 'user/:name', component: UserCmp }
         ] }
   ]);
}