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

Question

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

Вот рассматриваемый компонент:

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);
  }
}

Вот Plunk, демонстрирующий проблему. Нажмите на одно имя автора, а затем на другое, чтобы увидеть, что оно не меняется.

Answer 1

В вашем ContactsDetailComponent, изменить 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);
  }
}

Вот плагин с обновленным кодом.

Я не уверен, что это лучший / правильный хук жизненного цикла для использования. Возможно, есть какой-то крючок от Router это послужило бы этому лучше.

Answer 3

Еще один способ сделать это:

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

Здесь получить параметры маршрута из Observable. Преимущество использования Observable перед Snapshot состоит в том, чтобы повторно использовать компонент, не создавая его снова. Похоже, что это рекомендуемый способ сделать это в соответствии с окончательной документацией Angular 2.0.