代码之家  ›  专栏  ›  技术社区  ›  venkat

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

  •  1
  • venkat  · 技术社区  · 9 年前

    目前在angular2beta版本6上工作,在这种嵌套路由中,像使用(EX:/plan/…)future的父级到子级一样,在es5JavaScript开发中不起作用,但在类型脚本开发中它工作得很好

    引发错误:异常:链接“[”计划“]”无法解析为终端指令。

    应用程序。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]);
    });
    

    计划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 回复  |  直到 9 年前
        1
  •  0
  •   Thierry Templier    9 年前

    我认为你应该使用 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);
    

    作为参考,你可以看看这个笨蛋: https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info .

    推荐文章