問題與angular2路由

Question

我有一個問題，使用Angular2路由，我建立一個應用程序與三個按鈕，每個按鈕帶我到一個特定的路線。 這是我的應用程序，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({ 
 
\t imports: [ RouterModule.forRoot(routes) ], 
 
    \t exports: [ RouterModule ] 
 
\t 
 
}) 
 
export class AppRoutingModule {}

這是我app.component.html頁containes的按鈕：

<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>

我的應用程序.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頁。 dashboard.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() { 
 

 
    \t this.playerService.getPlayers() 
 
    \t .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" > 
 
\t <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> 
 
\t <div > 
 
\t <h2>{{bestPlayer.name}} <span class="badge badge1">{{bestPlayer.number}}</span></h2> 
 
\t <h2>with : {{max}} Likes <span class="glyphicon glyphicon-heart " style="color: red"></span></h2> 
 
\t <br><button class="btn btn-success" (click)="viewDetails(bestPlayer)">View player details</button> 
 
\t </div> 
 
\t 
 
</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() { 
 

 
    \t this.playerService.getPlayers() 
 
    \t .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]是不確定的」，但應用程序運行錯誤的功能呢。 當我刪除這個路由器開始再次工作