Компонент Angular2 не обнаруживает обновления параметров маршрутизации (Router 3.0)

Question

У меня есть небольшой Plunk, который я использую для игры с новой альфа-маршрутизатором 3.0, доступной в настоящее время в Angular 2. Это хорошо работает в целом, но проблема заключается в том, что после того, как я нажму ссылку, которая направляется к компоненту «detail» с определенным идентификатором, он никогда не изменяется, когда я нажимаю на другую ссылку с другим идентификатором. Компонент никогда не восстанавливается, поэтому он только когда-либо показывает, что он был передан в первый раз, когда он загружен.

Вот компонент вопрос:

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 демонстрирует проблему. Нажмите одно имя автора, а затем другое, чтобы увидеть, что оно не изменяется.

Answer 1

В вашем ContactsDetailComponent, изменить OnInit к этому:

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

Работал для меня в вашем шлепнуть.

Answer 2

Кажется, что для этого могут использоваться несколько крючков жизненного цикла. Мне удалось получить желаемое поведение с использованием интерфейса 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.