Angular2嵌套路由父到子ES5不起作用
Posted
技术标签:
【中文标题】Angular2嵌套路由父到子ES5不起作用【英文标题】:Angular2 Nested Routing parent to child ES5 not working 【发布时间】:2016-06-13 23:01:54 【问题描述】:目前正在开发 angular2 beta 版本 6,在这种嵌套路由中,例如使用父级到子级(EX:/plan/...),未来不适用于 es5 javascript 开发,但在类型脚本开发中它运行良好
抛出错误:异常:链接“[“计划”]”无法解析为终端指令。
App.js 代码
var Tabs = [],viewId;
app.AppComponent =
ng.core.Component(
selector: 'app',
template: '<router-outlet></router-outlet>',
directives: [ng.router.ROUTER_DIRECTIVES],
providers: [ng.http.HTTP_PROVIDERS]
)
.Class(
constructor: [ng.router.Router, function(router)
console.log("1");
router.config([
path: '/', redirectTo: ['Home'] ,
path: '/home', component: app.HomeComponent, name: 'Home' ,
path: '/plan/...', component: app.planComponent, name: 'Plan'
]);
]
);
document.addEventListener('DOMContentLoaded', function()
ng.platform.browser.bootstrap( app.AppComponent,[ng.router.ROUTER_PROVIDERS]);
);
Plan.js 代码
app.planComponent =
ng.core.Component(
selector: 'plan-view',
templateUrl: './assets/src/plan/view/plan.html',
directives: [ ng.router.RouterLink, ng.router.ROUTER_DIRECTIVES],
)
.Class(
constructor:[ng.router.Router, function(router)
console.log("2");
router.config([
path: '/', redirectTo: ['PlanInfo'] ,
path: '/planInfo', component: app.planInfoComponent, name: 'PlanInfo', useAsDefault: true /*,
path: '/coverage', component: app.CoverageComponent, name: 'Coverage' ,
path: '/nonelective', component: app.nonElectiveComponent, name: 'NonElective' ,
path: '/loans', component: app.loansComponent, name: 'Loans' ,
path: '/enrollment', component: app.enrollmentComponent, name: 'Enrollment' */
]);
]
);
【问题讨论】:
【参考方案1】:我认为你应该使用ng.router.RouteConfig
装饰器而不是路由器本身。像这样,您将拥有与 TypeScript 相同的配置。
方法如下:
ng.router
.RouteConfig([
path: '/', redirectTo: ['Home'] ,
path: '/home', component: app.HomeComponent, name: 'Home' ,
path: '/plan/...', component: app.planComponent, name: 'Plan'
])(app.AppComponent);
(...)
ng.router
.RouteConfig([
path: '/', redirectTo: ['PlanInfo'] ,
path: '/planInfo', component: app.planInfoComponent, name: 'PlanInfo', useAsDefault: true /*,
path: '/coverage', component: app.CoverageComponent, name: 'Coverage' ,
path: '/nonelective', component: app.nonElectiveComponent, name: 'NonElective' ,
path: '/loans', component: app.loansComponent, name: 'Loans' ,
path: '/enrollment', component: app.enrollmentComponent, name: 'Enrollment' */
])(app.planComponent);
作为参考,您可以看看这个 plunkr:https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info。
【讨论】:
以上是关于Angular2嵌套路由父到子ES5不起作用的主要内容,如果未能解决你的问题,请参考以下文章
嵌套的 React 路由器 4 路由在 Webpack 3 上不起作用