角2ルータの最初のヒット後にコンポーネントがリフレッシュされないが、ブラウザでURLが変更される

Question

角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コース "Angular Fundamentals"。 多くのありがとうございます。