角は経路の前にコロン（:)を削除しません

Question

私は公式の角度4のヒーローのチュートリアルに従っています。自分のバージョンで私は学生のリストを表示しています。 私は各コンポーネントのルートを実行する必要があり、解決できない問題が発生したので、ルートを設定する前にうまくいきました。

基本的には、StudentDetailsComponentのアプリケーションルートが機能しないという問題があります。私はチュートリアルと比較し、私のURLではコロン（:)は学生インデックスの前に削除されていないことに気づいた。

例：それはlocalhostなど取り除かれるチュートリアルで、一方、140021：：localhostを：4200 /詳細/ 4200 /詳細/ 23

私は、コードの残りの部分は正しいです、かなり確信して、私は単に」することができますこのルートがうまくいかない理由を見つけたようです。

これが私のアプリ-routing.module.tsです：

const routes: Routes = [ 
    { path: '', redirectTo: '/list', pathMatch: 'full' }, 
    { path: 'list', component: AppComponent }, 
    { path: 'details/:index', component: StudentDetailsComponent }, 
]; 

これは私が学生details.component.tsにインデックスを取得する方法である：

getStudent(): void { 
    const index = +this.route.snapshot.paramMap.get('index'); 
    this.studentManagementService.getStudent(index).subscribe(student => 
    this.student = student); 
} 

これは私が取得する方法でありますstudent-management.service.tsの実際の選択された学生：

これは私がwhiからの学生のリストを表示する方法ですCHあなたは学生をクリックすると詳細情報を得ることができる必要があります：

<li class="list-group-item" *ngFor="let student of students"> 
     <a routerLink="/details/:{{student.index}}"> 
     {{student.firstName}} {{student.lastName}} 
     </a> 
</li> 

コード全体がGitHub, branch: routing上で見つけることができます。

私は、Angularの方が新しくなっているので、どこでエラーを探すのかはわかりませんが、間違っていることを見つけようと多くの時間を費やしました。私が最初から最後までやったチュートリアルプロジェクトと比較すると、すべてがそうであるはずです。

Answer 1

問題はrouterLinkにあります。

に変更し、それを：今、それは唯一私がその後、学生をクリックして、初めての作品が

<a [routerLink]="['/details', student.index]">