Angular2组件不检测路由参数更新(路由器3.0)

Question

我有一个小的Plunk,我正在使用Angular 2中目前可用的新的Router 3.0 alpha.它一般运行良好,但问题是,一旦我点击一个路由到'detail'的链接具有特定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);
  }
}

以下是Plunk展示了这个问题.单击一个作者姓名,然后单击另一个作者名称以查看其不更改.

Answer 1

在你的ContactsDetailComponent,改为OnInit:

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

在Plunk中为我工作.