Angular 2 routerLink第一次點擊后未刷新組件，但瀏覽器中的URL發生了變化

Question

在Angular 2中，當我單擊位於App模塊上的routerLink時，它成功導航到參數化路線（例如/ events / 2），並在首次命中時加載了正確的組件（事件詳細信息）。 但是，當我單擊另一個鏈接（ 后續命中 （/ events / 3）時，它無法激發並刷新事件詳細信息組件。

導航欄，component.html

這些鏈接僅在首次點擊時起作用！ 后續點擊不會重新加載事件詳細信息組件

注意鏈接2：它調用組件上的函數。 對.navigate的調用與上面的效果相同-URL已更改，但組件未更改！ 該組件僅在首次命中時觸發！

<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' },

]

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

正如GünterZöchbauer在上面的評論中所說，這是答案：

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

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

在Pluralsight課程“ Angular Fundamentals”中解釋了此“錯誤”。 非常感謝。