我正在学习 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";
}
但由于某种原因它没有显示任何内容。
关于如何解决这个问题有什么想法吗?
最佳答案
您刚刚在您的应用中配置了路由
。因此,由于 configured routes
和 router-outlet
,您什么也得不到(作为输出)。所以,在这里你需要明确地提供你的路由配置,如下所示,
RouterModule.forRoot([
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{
path: 'heroes',
component: HeroesComponent
}
])
关于javascript - Angular2 - : RouterModule. forRoot 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41672560/