我尝试从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... },(...) ]