2

我有一个小 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。单击一个作者姓名，然后单击另一个以查看它不会更改。

4

3 回答 3

8

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

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

在你的 Plunk 中为我工作。

于 2016-06-24T14:50:28.693 回答
1

似乎有多个 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);
  }
}

这是带有更新代码的plunk 。

不过，我不相信这是最好的/正确的生命周期钩子。也许有某种可用的钩子可以Router更好地解决这个问题。

于 2016-06-25T01:04:11.193 回答
0

另一种方法：

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

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

于 2016-09-23T13:08:56.763 回答