Question

我有一个小插件，我正在使用Angular 2中目前可用的新的Router 3.0 alpha。它一般很好用，但问题是，一旦我点击链接到路由到具有特定ID的“detail”组件，当我点击具有不同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

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

带有更新代码的

Here's a plunk。

我不相信这是最好/正确的生命周期钩子。也许Router提供了某种可以更好地发挥作用的钩子。

Answer 3

另一种方法：

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

这里从Observable中检索路径参数。使用Observable over Snapshot的优点是重用组件而无需再次实例化它。看起来这是根据Angular 2.0最终文档执行此操作的推荐方法。

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

3 个答案: