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不起作用的主要内容,如果未能解决你的问题,请参考以下文章

从子组件到父组件的绑定字符串字段不起作用

Angular 8嵌套路由和多个路由器插座不起作用

带有前缀和资源的laravel嵌套路由不起作用

嵌套的 React 路由器 4 路由在 Webpack 3 上不起作用

React-router-dom:嵌套路由不起作用,而是从根组件应用程序中路由

React-router-dom:非常简单的嵌套路由不起作用