我正在关注Angular2
教程:Tour of Heroes
我的所有教程都符合预期,但到达以下时间点:
https://angular.io/docs/ts/latest/tutorial/toh-pt5.html#!#add-a-dashboard-
它没有按预期工作。
它假设正在使用:
1- on file:" app.module.ts",取消注释代码:RouterModule.forRoot...
2- on file:" app.component.ts",将以下行添加到模板中:
<a routerLink="/heroes">Heroes</a>
<router-outlet></router-outlet>
我知道我应该提供最小化的代码,但我认为这对我来说是不可能的,因为我不确切地知道问题所在。我可以说你是我一直在按照教程一直工作。
在此您可以下载源代码:
https://github.com/nightclubso/project_03
就像它现在正在发挥作用。没有编译问题。但如果你在浏览器控制台上进行了2分以上的测试,你就会发现很多错误。
您必须修改的文件(如教程所示)是:
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";
}
但由于某种原因,它不会显示任何内容。
关于如何解决这个问题的任何想法?
答案 0 :(得分:0)
您刚刚在应用中配置了routes
。因此,由于 configured routes
和 router-outlet
,您什么都得不到(作为输出)。因此,您需要明确提供路由配置,如下所示,
RouterModule.forRoot([
{
path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{
path: 'heroes',
component: HeroesComponent
}
])
答案 1 :(得分:0)
也遇到了这个问题。如果查看错误消息,则表示需要为APP_BASE_HREF标记提供值或添加基本元素。因此,您可以(推荐选项)打开index.html文件并添加
< base href = "/" >
在head元素下给出:
...
<head>
<base href="/">
<title>Angular QuickStart</title>
...
OR
转到您的app.module.ts文件,以及您的“提供商: ...“数组,添加
{provide: APP_BASE_HREF, useValue : "/" }
,并提供:
...
providers: [ HeroService, {provide: APP_BASE_HREF, useValue : '/' } ],
...