Angular2コンポーネントがルーティングパラメータのアップデートを検出しない（ルータ3.0）

Question

私は現在、Angular 2で利用可能な新しいRouter 3.0 alphaで遊んでいる小さなPlunkを持っています。問題は、特定のIDを持つ '詳細'コンポーネントにルーティングするリンクをクリックすると、別のIDを持つ別のリンクをクリックすると変更されないということです。コンポーネントは再インスタンス化されることはありません。したがって、コンポーネントが初めてロードされたときに渡された内容が示されます。

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { ContactsService } from './contacts.service'; 

@Component({ 
    selector: 'contacts-detail', 
    template: ` 
    <h2>{{contact.name}}</h2> 
    ` 
}) 
export class ContactsDetailComponent implements OnInit { 

    constructor(private contactsService: ContactsService, private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.contact = this.contactsService.getContact(this.route.snapshot.params.id); 
    console.log('Fetching user', this.route.snapshot.params.id); 
    } 
} 

Here is the Plunk問題を実証：

は、ここで問題になっているコンポーネントです。 1つの著者名をクリックし、次に別の名前をクリックして変更しないようにします。あなたのContactsDetailComponentで

Answer 1

、これにOnInitを変更します。

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
    let id = +params['id']; 
    this.contact = this.contactsService.getContact(id); 
    }); 
    } 

があなたのPlunkに私のために働きました。

Answer 2

これに使用できる複数のlifeCycleフックがあるようです。 DoCheckインターフェイスを使用し、コンポーネントクラスでngDoCheck()メソッドを実装することで、以下のように目的の動作を得ることができました。

import { Component, DoCheck } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { ContactsService } from './contacts.service'; 

@Component({ 
    selector: 'contacts-detail', 
    template: ` 
    <h2>{{contact.name}}</h2> 
    ` 
}) 
export class ContactsDetailComponent implements AfterViewChecked, DoCheck { 

    constructor(private contactsService: ContactsService, private route: ActivatedRoute) { 
    } 

    ngDoCheck() { 
    this.contact = this.contactsService.getContact(this.route.snapshot.params.id); 
    } 
} 

Here's a plunk更新コードです。

私はこのライフサイクルフックが最高で正しいとは確信していません。おそらく、このより良いサービスを提供するRouterから利用可能なフックがあります。

Answer 3

これ行う別の方法：ここで

ngOnInit() { 
    this.route.params.forEach((params: Params) => { 
     let id = +params['id']; 
     this.contact = this.contactsService.getContact(id); 
    }); 
} 

は観測から、ルートのparamsを取得します。 Observable over Snapshotを使用する利点は、コンポーネントを再度インスタンス化せずにコンポーネントを再利用することです。これは、Angular 2.0の最終的なドキュメントに従ってこれを行う推奨された方法です。