如何使用Javascript在Angular 2中路由

Question

我正在关注英雄之旅教程 ; 目前在路由部分.我正在使用2.0.0-RC4捆绑包.

我已成功将重构AppComponent为一个shell HeroesComponent.我还添加了路由,加载了必要的文件,并完成了必要的引导.

index.js - 必须在平台浏览器下添加路由器,因为这是我在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>

main.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到URL,Heroes组件没有加载,我在我的控制台中收到以下错误

EXCEPTION:错误:未捕获(在承诺中):TypeError:无法读取未定义的属性'of'

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

编辑

当我''在我的路线文件中指定路线时,如此...

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

在导航到英雄路径<router-outlet> 之前，Angular 不知道要显示什么。您需要定义空 ('') 路径的路由并创建 HomeComponent、EmptyComponent 或任何适合您需要的组件。或者您可以为空路径定义重定向。