angular2路由问题

Question

我在使用 Angular2 路由时遇到问题，我用三个按钮构建了一个应用程序，每个按钮都将我带到一个特定的路线。 这是我的 app-routing.module 页面：

/***** importation Components****/
import {NgModule} from '@angular/core';

import {DashboardComponent} from './dashboard/dashboard.component';
import {PlayersComponent} from './players/players.component';
import {PlayerDetailsComponent} from './player-details/player-details.component';
import {RouterModule,Routes} from '@angular/router';

const routes : Routes=[
{ path : '',redirectTo:'dashboard',pathMatch: 'full'},
{ path: 'dashboard',component:DashboardComponent},
{ path: 'players',component:PlayersComponent},
{ path: 'detail/:id',component:PlayerDetailsComponent}

] ;

@NgModule({
	  imports: [ RouterModule.forRoot(routes) ],
  	  exports: [ RouterModule ]
	
})
export class AppRoutingModule {}

这是我的 app.component.html 页面，其中包含按钮：

<ul class="nav nav-pills nav-justified" >
   <li class="element" role="presentation"  ><a  routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
  <li class="element" role="presentation" ><a  routerLink="/players" routerLinkActive="active">Players</a></li>
  <li class="element" role="presentation" ><a  href="test">Statistics</a></li>
</ul>
<router-outlet></router-outlet>

我的 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
/***********Importation Components********************/
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { PlayersComponent } from './players/players.component';
import { PlayerDetailsComponent } from './player-details/player-details.component';

/*****Importaion Service*******************************/
import {PlayerService} from './player.service';
/**** Importation fichier routing**************/
import {AppRoutingModule} from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    PlayersComponent,
    PlayerDetailsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [PlayerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我单击一个按钮时，它不会将我带到我想要的组件，另一方面，如果我在地址栏中键入路径，它会将我带到足够的组件。 我想我的路由版本是这样的：

"scripts": {},
  "typings": "./router.d.ts",
  "version": "4.1.3"
}

编辑： 我发现在删除最近的更新后，我已经完成了路由再次开始工作。 这些是我更新的 2 页。 仪表板.component.html

import { Component, OnInit } from '@angular/core';
import {Player} from '../player';
import {PlayerService} from '../player.service';
import {Router} from '@angular/router';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  players : Player[] = [];
 bestPlayer:Player;
 data:Player[];
 
max:number =0;
  constructor(private playerService : PlayerService ,private router: Router) { }
 

 
  ngOnInit() { 

  	this.playerService.getPlayers()
  	.then(players=> this.players = players);
    this.data=this.playerService.getDatas();
  for (var i = 0; i <= this.data.length; i++) {
    if (this.data[i].likes>this.max) {
      this.max=this.data[i].likes;
      this.bestPlayer=this.data[i];
      
     } 
  }
 
    }
    viewDetails(bestPlayer: Player):void{
      this.router.navigate(['/detail',this.bestPlayer.id]);

    }



}

<div class="container well-sm bloc" >
	<div class="row"><h1 style="font-family: 'Lobster', cursive;color: white"><span class="glyphicon glyphicon-star" style="color: #FFC153"></span> Player of the week is </h1> </div>
	<div >
	<h2>{{bestPlayer.name}} <span class="badge badge1">{{bestPlayer.number}}</span></h2>
	<h2>with : {{max}} Likes <span class="glyphicon glyphicon-heart " style="color: red"></span></h2>
	<br><button class="btn btn-success" (click)="viewDetails(bestPlayer)">View player details</button>
	</div>
	
</div>

Answer 1

尝试：

在 app.component.html 中

<a [routerLink]="['dashboard']">Dashboard</a>
<a [routerLink]="['players']">Players</a>
<router-outlet></router-outlet>

路由器配置

const routes : Routes=[
{ path : '',redirectTo:'dashboard',pathMatch: 'full'},
{ path: 'dashboard',component:DashboardComponent},
{ path: 'players',component:PlayersComponent},
{ path: 'detail/:id',component:PlayerDetailsComponent}

] ;

@NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]

})
export class AppRoutingModule {}

import {AppRoutingModule} from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    PlayersComponent,
    PlayerDetailsComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    HttpModule,

  ],
  providers: [PlayerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意：您只能调用 RouterModule.forRoot() 一次。看来你必须在你的应用程序中调用这个函数

Answer 2

我发现我的 dashboard.component.ts 中的一个问题导致了该问题。 我编写了一个函数来获取并显示我的对象数组中的“最佳玩家”（拥有更多喜欢的玩家）。 这就是函数的样子

 ngOnInit() { 

  	this.playerService.getPlayers()
  	.then(players=> this.players = players);
    this.data=this.playerService.getDatas();
  for (var i = 0; i <= this.data.length; i++) {
    if (this.data[i].likes>this.max) {
      this.max=this.data[i].likes;
      this.bestPlayer=this.data[i];
      
     } 
  }
 
    }
    viewDetails(bestPlayer: Player):void{
      this.router.navigate(['/detail',this.bestPlayer.id]);

    }

当我运行该应用程序时，浏览器在控制台中显示一个错误函数“this.data[i] is undefined”，但该应用程序仍然运行。 当我删除它时，路由器再次开始工作