Angular 2 routerLink在第一次點擊後不刷新組件，但URL在瀏覽器中更改

Question

在Angular 2中，當我點擊位於App模塊上的routerLink時，它成功導航到參數化路線（例如/ events/2）並加載正確的組件（事件詳情）第一次擊中。然而，當我點擊另一個鏈接（後續命中（/事件/ 3），它不能開火併刷新事件的細節部分。

導航欄，component.html

這些鏈接工作僅在第一次單擊隨後點擊不重裝事件細節分量

通知鏈接2：！它調用到組件上的功能.navigate呼叫與上述同樣的效果 - 網址是改變，但不是組件！只有組件纔會觸發第一擊！

<div><a [routerLink]="['/events/1']" routerLinkActive="active">Link 1</a></div> 
<div><a (click)="onLinkClick(2);">Link 2 (Calls this.route.navigate on component</a></div> 
<div><a [routerLink]="['/events', 3]" routerLinkActive="active">Link 3</a></div> 
<div><a [routerLink]="['/events', 4]" routerLinkActive="active">Link 4</a></div> 

navbar.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AuthService } from '../user/auth.service'; 
import { ISession } from '../events/shared/event.model'; 
import { EventService } from '../events/shared/event.service'; 
import { Router } from '@angular/router' 

@Component({ 
    selector: 'navbar', 
    templateUrl: 'app/nav/navbar.component.html', 
    styles: [` 
    .nav.navbar-nav { font-size: 15px; } 
    #searchForm { margin-right: 100px; } 
    @media (max-width: 1200px) { #searchForm {display:none}} 
    li > a.active { color: #F97924; } 
    `] 
}) 

export class NavBarComponent implements OnInit { 
    constructor(private authService: AuthService, private eventService: 
EventService, private router: Router) { 

    } 
    searchTerm: string = ''; 
    foundSessions: ISession[]; 
    ngOnInit() { } 

    //Other code 

    onLinkClick(id: number){ 
     this.router.navigate(['events/', id]) // THIS LINE FIRES, BUT DOES NOT CAUSE THE COMPONENT TO RELOAD - **ONLY THE URL** CHANGES. 
    } 
} 

routes.ts

import { Routes } from '@angular/router'; 
import { Error404Component } from './errors/404.errors.component'; 
import { 
    EventsListComponent, 
    EventDetailsComponent, 
    CreateEventComponent, 
    EventRouteActivator, 
    EventListResolver, 
    CreateSessionComponent 
} from './events/index'; 

export const AppRoutes: Routes = [ 
    { path: 'events/new', component: CreateEventComponent, canDeactivate: 
['canDeactivateCreateEvent'] }, 
    { path: 'events', component: EventsListComponent, resolve: { events:   
EventListResolver } }, 
    { path: 'events/:id', component: EventDetailsComponent, canActivate: 
[EventRouteActivator] } // <======= THIS ONE FAILS TO FIRE THE COMPONENT MORE THAN ONCE! 
    { path: 'events/session/new', component: CreateSessionComponent }, 
    { path: '404', component: Error404Component }, 
    { path: '', redirectTo: '/events', pathMatch: 'full' }, 
    { path: 'user', loadChildren: 'app/user/user.module#UserModule' }, 

] 

事件-app.component（根組件）

import { Component } from '@angular/core' 

@Component({ 
    selector: 'events-app', 
    template: ` 
    <navbar></navbar> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class EventsAppComponent { 

} 

app.module.ts

import { NgModule } from '@angular/core' 
import { BrowserModule } from '@angular/platform-browser' 
import { FormsModule, ReactiveFormsModule } from '@angular/forms' 
import { NavBarComponent } from './nav/navbar.component' 
import { 
    JQ_TOKEN, 
    TOASTR_TOKEN, 
    Toaster, 
    CollapsableComponent, 
    SimpleModalComponent, 
    ModalTriggerDirective 
} from './common/index'; 
import { 
    EventsListComponent, 
    EventThumbnailComponent, 
    EventService, 
    EventDetailsComponent, 
    CreateEventComponent, 
    EventRouteActivator, 
    EventListResolver, 
    CreateSessionComponent, 
    SessionListComponent, 
    DurationPipe 
} from './events/index' 
import { AppRoutes } from './routes'; 
import { RouterModule } from '@angular/router'; 
import { Error404Component } from './errors/404.errors.component'; 
import { EventsAppComponent } from './events-app.component' 
import { AuthService } from './user/auth.service' 

declare let toastr: Toaster; 
declare let jQuery: Object; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     RouterModule.forRoot(AppRoutes), 
     FormsModule, 
     ReactiveFormsModule 
    ], 
    declarations: [ 
     EventsAppComponent, 
     EventsListComponent, 
     EventThumbnailComponent, 
     NavBarComponent, 
     EventDetailsComponent, 
     CreateEventComponent, 
     Error404Component, 
     CreateSessionComponent, 
     SessionListComponent, 
     CollapsableComponent, 
     SimpleModalComponent, 
     DurationPipe, 
     ModalTriggerDirective 
    ], 
    providers: [ 
     EventService, EventRouteActivator, EventListResolver, AuthService, 
     { provide: 'canDeactivateCreateEvent', useValue: checkDirtyState }, 
     { provide: TOASTR_TOKEN, useValue: toastr } , 
     { provide: JQ_TOKEN, useValue: jQuery } 

    ], 
    bootstrap: [EventsAppComponent] 
}) 
export class AppModule { } 

function checkDirtyState(component: CreateEventComponent) { 
    if (component.isDirty) { 
     return window.confirm('You have not saved this component. Do you 
really want to cancel?'); 
    } 
    return true; 
} 

不勝感激任何想法。

Answer 1

由於岡特Zöchbauer說，在上面他的評論，這裏就是答案：

在組件中，通過訂閱偵聽更改參數：

ngOnInit() { 
    this.sub = this.route.params.subscribe((params) =>{ 
     this.event = this.eventService.getEvent(+params['id']); 
    }); 
} 

這個「錯誤」的解釋Pluralsight課程「角度基礎」。 非常感謝。