Question

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

＆＃13;

/***** 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 {}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 我的app.module.ts

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 编辑： 我发现在删除最近的更新后我已经完成了路由开始再次工作。这些是我更新过的2页。 dashboard.component.html

＆＃13;

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]);

    }



}

＆＃13;

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

＆＃13;

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中的问题导致了问题。我写了一个函数来获取和展示最好的玩家＆＃34;在我的对象数组中（有更多喜欢的玩家）。这就是函数的样子

＆＃13;

 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]);

    }

＆＃13;

＆＃13; 当我运行应用程序时，浏览器在控制台中显示错误函数＆＃34; this.data [i]未定义＆＃34;但无论如何应用程序运行。当我删除它时，路由器再次开始工作

angular2路由问题

2 个答案: