Angular2 - 问题:RouterModule.forRoot

时间:2017-01-16 08:55:53

标签: javascript angular typescript

我正在关注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";
}

但由于某种原因,它不会显示任何内容。

关于如何解决这个问题的任何想法?

2 个答案:

答案 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 : '/' } ],
...