각도가 콜론 (:)을 제거하지 못했습니다. 경로 이전에 콜론 (:)이 제거되지 않습니다

Question

내 자신의 버전에서 공식 Angular 4 Hero 자습서를보고 있었는데 학생 목록을 표시하고 학생의 클릭으로 자세한 정보를 표시해야합니다. 각 구성 요소에 대한 경로를 수행해야하는 지점에 도달했으며 해결할 수없는 문제가 발생했습니다. 경로를 설정하기 전에 정상적으로 작동했습니다.

기본적으로 문제는 StudentDetailsComponent의 응용 프로그램 경로가 작동하지 않는다는 것입니다. 튜토리얼과 비교해 보았을 때 내 URL에서 콜론 (:)이 학생 색인 전에 제거되지 않았다는 것을 알았습니다.

예 : 로컬 호스트 : 튜토리얼에서 같은 로컬 호스트로서 제거되는 반면, 140,021 : 4200/세부/I 코드의 나머지가 정확한지 확신 (23)

4200/세부/나는 단지 수 ' 이 경로가 작동하지 않는 이유를 찾은 것 같습니다.

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

이것은 내가 얼마나입니다 : 나는 학생 details.component.ts의 인덱스를 얼마나

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

이것은 :

이

내 앱 routing.module.ts입니다 student.service.ts의 실제 선택된 학생 :

그리고 이것은 내가 whi의 학생 목록을 표시하는 방법입니다 채널 당신은 세부 사항을 학생을 클릭 얻을 수 있어야합니다 :

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