Question

我尝试从angular2（从服务器获取路由配置）动态构建路由，之后我解析它并生成组件路由的指令（我将父路由配置和子路由到不同的组件，因为我不知道如何定义将子组件路由到一个main.app.ts文件中。

问题是当应用程序启动并尝试创建路由配置并且routeGenerator不是构建路由时（异步延迟）可以t parse routes data (because async delay, so routesData undefined now) and app is crashig. I don知道如何处理此问题。寻找生命周期引擎盖（有些像 - @ Angular2BeforeAppStarted），但一无所获。

    import {Component, Input, OnChanges} from 'angular2/core';
import {RouteConfig, RouterOutlet, ROUTER_DIRECTIVES, Router} from 'angular2/router';
/* ------- !Angular 2 native components  ---------*/
import {routeGenInstance} from '../../config/routes/patient_routes';


protected const BUILT_MODULE_PATH: string = '/built/modules/patients/';

@Component({
  template: `
    <router-outlet ></router-outlet>
  `,
  directives: [RouterOutlet, ROUTER_DIRECTIVES]
})
@RouteConfig(routeGenInstance.getRouteDefinitions())

export class PatientsComponent {
  @Input();

  constructor() {}

}

此外，我尝试以相同的方式更新路线（但应用程序立即崩溃，因为导航组件中的导航链接没有正确的链接方式）

import {RouteConfig, RouterOutlet, ROUTER_DIRECTIVES, Router} from 'angular2/router';

     constructor(
        private router: Router
         ) {
        router.config([
             routeGenInstance.getRoutesDefinition()
        ])
      }

我的路由定义使用异步加载器，因此它们是正确的，并且可以在没有异步延迟的情况下工作。我不知道如何使角度等待我的路线定义，并开始运行应用程序。

请帮帮我。感谢。

UPD：

@Thierry再次感谢你的帮助。你真棒我的朋友和导师。最后一个问题（最后一个）。你能告诉我如何将routeConfig定义为一个带有子子路径定义的app文件吗？它的意思是。我有主要级别路线到app文件

{
  path: '/',
  name: 'Dashboard',
  component: DashboardComponent,
  useAsDefault: true
},
{
  path: '/patients/...',
  name: 'Patients',
  component: PatientsComponent
},

和患者子路径进入患者组成部分（@RouteConfig）

{
  path: '/',      // root is appRoot/patients/...
  name: 'PatientsList', component...},
  {
  "name": "Chart",
  "path": "/chart/:id", component...
},

如何将此路由配置仅定义到一个app.file中？（如何在一个文件中配置带路由的路由）？

Answer 1

一个选项可能是在引导应用程序之前获取配置。

var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
var http = injector.get(Http);

http.get('routes.json').map(res => res.json())
  .subscribe(data => {
    bootstrap(AppComponent, [
      HTTP_PROVIDERS
      provide('routesConfig', { useValue: data })
    ]);
  });

然后，您可以通过依赖注入和同步方式访问路径配置：

@Component({
  (...)
})
export class AppComponent {
  constructor(@Inject('routesConfig') private routesConfig, private router:Router) {
    // Configure here your routes
  }
}

这两个问题可以帮到你：

修改

您可以利用Observable.forkJoin方法从不同的请求加载路由配置：

var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]); var http = injector.get(Http); Observable.forkJoin([ http.get('mainRoutes.json'), http.get('childRoutes.json') ]) .map(responses => { return { main: res[0].json(), children: res[1].json() }; }) .subscribe(data => { bootstrap(AppComponent, [ HTTP_PROVIDERS provide('routesConfig', { useValue: data }) ]); });

<强> EDIT1

我认为你可以尝试这样的事情：

[ { path: '/patients/...', name: 'Patients', component: PatientsComponent, childRoutes: [ { path: '/', // root is appRoot/patients/... name: 'PatientsList', component... }, (...) ] } ]

但是你需要根据你想要处理的提示拆分内容以获得不同的元素：

一个用于根：

[ { path: '/patients/...', name: 'Patients', component: PatientsComponent } ]

几个孩子。例如，对于患者：

[ { path: '/', // root is appRoot/patients/... name: 'PatientsList', component... }, (...) ]

Answer 2

在新路由器中GcmSender.java）https://angular.io/docs/js/latest/api/router/index/Router-class.html#!#resetConfig-anchor Program arguments可以使用

>= RC.3

另见https://github.com/angular/angular/issues/9472#issuecomment-229230093

您可以通过提供SystemJsComponentResolver来异步加载组件。

现在，您可以异步加载路由，并使用resetConfig强制更新配置。

一旦AppModule在master中，我们将利用这些来实现子配置的异步加载。

https://github.com/angular/angular/issues/11437#issuecomment-245995186提供 RC.6 Plunker

Answer 3

使用Observables / Promises提供路由转换不是一个可靠的解决方案，因此Angular路由器需要Route []或Routes，但HTTP请求只能返回Observable / Promise。

Angular应用程序已初始化，但路由转换的检索过程仍在继续使用Observables / Promises。

正如Thierry Templier所说，在引导应用程序之前获取配置可以解决问题。

另外，请检查github上的@ngx-i18n-router/core。

异步加载为Angular 2路由数据和构建路由指令

3 个答案: