Angular2 组件不检测路由参数更新（Router 3.0）

Question

我有一个小 Plunk，我正在用它来玩 Angular 2 中当前可用的新路由器 3.0 alpha。它通常运行良好，但问题是一旦我单击一个链接到具有特定 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 演示问题。单击一个作者姓名，然后单击另一个以查看它不会更改。

Answer 1

另一种方法：

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

这里从 Observable 中检索路由参数。使用 Observable 优于 Snapshot 的优点是无需再次实例化即可重用组件。看起来这是根据 Angular 2.0 最终文档推荐的方法。

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

在您的ContactsDetailComponent 中，将OnInit 更改为：

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

在你的 Plunk 中为我工作。