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

我尝试从angular2构建动态路由(从服务器获取路由配置),之后我解析它并生成组件路由的指令(我有父路由配置和子进入不同的组件,因为我不知道如何定义子路径组件成一个main.app.ts文件).

问题是当应用程序启动并尝试创建路由配置并且routeGenerator尚未构建路由(异步延迟)无法解析路由数据(因为异步延迟,因此现在路由数据未定义)和应用程序崩溃.我不知道该怎么做.寻找生命周期引擎盖(有些像 – @ 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,Router} from 'angular2/router';

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

我的路由定义使用异步加载器,因此它们是正确的,并且无异常延迟工作.我不知道如何使角度等待我的路线定义,并开始运行应用程序.

请帮我.谢谢.

UPD：

@Thierry再次感谢你的帮助.你真棒我的朋友和导师.最后一个问题(最后一个).你能告诉我如何将routeConfig定义为一个具有子子路径定义的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中？ (如何在一个文件中配置带路由的路由)？

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

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
  }
}

这两个问题可以帮助您：

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

编辑

您可以利用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,{ useValue: data })
    ]);
  });

EDIT1

我想你可以试试这样的东西：

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

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

>一个根：

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

>几个孩子.例如对于患者：

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

原文链接：https://www.f2er.com/angularjs/142146.html

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

猜你在找的Angularjs相关文章