javascript - Angular2 - : RouterModule. forRoot 问题

Question

我正在学习 Angular2 教程:Tour of Heroes

我所有的教程旅程都如预期的那样，但是到了以下几点:

https://angular.io/docs/ts/latest/tutorial/toh-pt5.html#!#add-a-dashboard-

它没有正常工作。

它应该与:

1- 文件:“app.module.ts”，取消注释代码:RouterModule.forRoot...

2- 在文件:“app.component.ts”中，将以下行添加到模板中:

<a routerLink="/heroes">Heroes</a>
<router-outlet></router-outlet>

我知道我应该提供一个最小化的代码，但我认为这对我来说是不可能的，因为我不知道问题出在哪里。我可以告诉你的是，我一直在逐步按照教程进行操作，并且一直在努力。

在此之前，您可以下载源代码:

https://github.com/nightclubso/project_03

就像现在一样，它正在工作。没有编译问题。但是，如果您执行以上两点，那么在浏览器控制台上您会看到很多错误。

您必须修改的文件(如教程所建议的)是:

app.module.ts 最后有以下代码:

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { FormsModule }      from '@angular/forms';
import { RouterModule }     from '@angular/router';

import { AppComponent }         from './app.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroesComponent }      from './heroes.component';
import { HeroService }          from './hero.service';


@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent,
  ],
  providers:    [ HeroService ], 
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

和app.component.ts 最终有以下代码:

import { Component } from '@angular/core';

@Component ({
    selector: "my-app",
    template: `
        <h1>{{title}}</h1>
        <a routerLink="/heroes">Heroes</a>
        <router-outlet></router-outlet>
    `,
})
export class AppComponent {
    title: string = "Tour of Heroes";
}

但由于某种原因它没有显示任何内容。

关于如何解决这个问题有什么想法吗？

Answer 1

您刚刚在您的应用中配置了路由。因此，由于 configured routes 和 router-outlet，您什么也得不到(作为输出)。所以，在这里你需要明确地提供你的路由配置，如下所示，

RouterModule.forRoot([
  {
    path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  {
    path: 'heroes',
    component: HeroesComponent
  }
])