Angularjs Angular2嵌套路由父到子ES5不工作

目前正在使用angular2 beta版本6，在这种嵌套的路由（如父到子使用（EX:/plan/…）中，future不在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]);
});

---

我认为应该使用

ng.router.RouteConfig

decorator而不是路由器本身。这样，您将拥有与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:。

我认为您应该使用

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: