异步加载传递数据，并建立角2路线指示 [英] Async load routes data and build route instruction for Angular 2

问题描述

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

I try to build dynamically routes from angular2 (fetch route config from server), after that I parse it and generate instruction for component route (I have parent routes config and child into different components, because I don`t know how define route for child component into one main.app.ts file).

问题是，当应用程序启动并尝试建立路由配置和routeGenerator没有建立航线，但（异步延迟）可以通过 T解析数据路由（因为异步延迟，所以routesData现在不确定的），并应用程序是crashig。我不 T知道该怎么该怎么做。寻找生命周期罩（有些像 - @ Angular2BeforeAppStarted）。但一无所获

The problem is when app started and try to create routes config and routeGenerator is not build routes yet (async delay) cant parse routes data (because async delay, so routesData undefined now) and app is crashig. I dont know what to do with this. Looking for lifecycle hood (some like - @Angular2BeforeAppStarted ) but found nothing.

    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() {}

}

此外，我尝试更新相同的方式途径（但由于导航组件我的导航链接是不是有一些正确的链接方式的应用程序将立即崩溃）

Also i try to update routes in the same way (but app is crashed immediately because my Navigation link in navigation component is not have some correct link way)

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

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

我的路线定义使用异步加载所以他们是正确的，工作异步内部消除延迟。我不`吨知道如何使角等待我的路线定义和泰德开始运行应用程序。

my route definitions use Async loader so they are correct and work whithout async delay. I don`t know how to make angular wait for my routes definitions and thet start to run the app.

请，帮助我。谢谢你。

UPD：

您的帮助@Thierry许多再次感谢。你是我真棒朋友和导师。最后一个问题（最后）。你能告诉我，我怎么可以定义routeConfig与孩子subrouting定义一个应用程序文件？
它的意思。我有主级路由到应用程序文件

@Thierry many thanks for your help again. You are awesome my friend and mentor. One last question (last). Can you tell me how I can define routeConfig into one app file with child subrouting definition? Its mean. I have main level routes into app files

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

和病人的子路由到patientsComponent（@RouteConfig）

and patient sub routes into patientsComponent (@RouteConfig)

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

如何确定这条路线只配置成一​​个app.file？ （如何配置一个文件与子路由的路由）？

How to define this route config only into one app.file ? (How to configure route with sub routing in one file)?

推荐答案

这是选择可能是自举应用程序之前，让您的配置。

An option could be to get your configuration before bootstrapping your application.

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 })
    ]);
  });

然后就可以通过依赖注入获得的路由配置和同步方式：

Then you can have access the routes configuration by dependency injection and in a synchronous way:

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

这两个问题可以帮助你：

These two questions could help you:

• How自举一个角2应用程序异步


• angular2从Ajax调用（S）
数据引导

• How to bootstrap an Angular 2 application asynchronously
• angular2 bootstrap with data from ajax call(s)

修改

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

You can leverage the Observable.forkJoin method to load your route configuration from different requests:

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

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

I think that you could try something like that:

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

但你需要分割的内容，根据你要处理的提示，让不同的元素：

But you need to split the content to get different elements according to the hints you want to handle:

• 一个根：

• one for the root:

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

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

several for children. For example for patients:

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

这篇关于异步加载传递数据，并建立角2路线指示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！