javascript - 如何使用 Javascript 在 Angular 2 中进行路由

Question

我正在关注 Tour of Heroes tutorial ;目前在 Routing section .我正在使用 2.0.0-RC4 包。

我已经成功地将 AppComponent 重构为 HeroesComponent 的外壳。我还添加了路由，加载了必要的文件，并完成了必要的引导。

index.js — 必须在 platform-b​​rowser 下添加路由器，因为这是我在 ng-router 源代码中读到的内容； provideRouter 否则返回 false

<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<script src="node_modules/@angular/router/bundles/router.umd.js"></script>

ma​​in.js

ng.platformBrowserDynamic.bootstrap(app.AppComponent, [
    app.ROUTER_PROVIDERS
]);

app.routes.js

(function (app) {
  const routes = [
    { path: 'heroes', component: app.HeroesComponent }
  ];

  app.ROUTER_PROVIDERS = [
    ng.router.provideRouter(routes)
  ];
})(window.app || (window.app = {}))

app.component.js

(function (app) {
  app.AppComponent = ng.core.Component({
    selector: 'ig-app',
    directives: [ng.router.ROUTER_DIRECTIVES],
    providers: [app.HeroService],
    template:`
      <h1>{{title}}</h1>
      <a [routerLink]="['/heroes']">Heroes</a>
      <router-outlet></router-outlet>
    `
    }).Class({
      constructor: function() {
        this.title = 'Tour of Heroes';
      }
    });
})(window.app || (window.app = {}));

这会使用 Heroes 链接加载我的应用程序。但是控制台报错

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

然后我将 /heroes 附加到 URL，Heroes 组件没有加载，我在控制台中收到以下错误

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'of' of undefined

关于我可能做错了什么的任何指示？

编辑

当我像这样在我的路由文件中为 '' 指定路由时...

app.routes.js

(function (app) {
  const routes = [
    { path: 'heroes', component: app.HeroesComponent },
    { path: '', redirectTo: '/heroes', pathMatch: 'full' }
  ];

  app.ROUTER_PROVIDERS = [
    ng.router.provideRouter(routes)
  ];
})(window.app || (window.app = {}))

我在两个页面上都收到上面列出的第二个错误。如果我尝试将它设置为 app.AppComponent 我会收到错误提示我应该有一个 redirectTo

Answer 1

我完成 Angular 2 示例，英雄之旅，路由部分，使用 ES5。

我上传代码到github .

我正在使用 2.0.0-RC5 包。我无法使用 2.0.0-RC4 包解决问题!

流动部分代码:

app.routes.js

(function(app) {
  app.routing = ng.router.RouterModule.forRoot([
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
    {path: 'dashboard', component: app.DashboardComponent},
    {path: 'heroes', component: app.HeroesComponent},
    {path: 'detail/:id', component: app.HeroDetailComponent}
  ]);
})(window.app || (window.app = {}));

希望对你有帮助!