Angular2 组件未检测到路由参数更新(路由器 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);
  }
}

下面是演示问题的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

似乎有多个生命周期钩子可以用于此。我设法使用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的优点是可以重用组件，而无需再次实例化它。看起来这是Angular 2.0最终文档中推荐的方法。