异步 – 异步加载为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 编辑 您可以利用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... },(...) ] (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |