I've got a small Plunk I'm using for playing around with the new Router 3.0 alpha currently available in Angular 2. It works well in general, but the issue is that once I click on a link that routes to the 'detail' ponent with a particular ID, it never changes when I click on a different link with a different ID. The ponent is never being reinstantiated, so it only ever shows what it was passed the very first time it is loaded.

Here's the ponent in question:

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 demonstrating the problem. Click on one author name and then another to see it not change.

I've got a small Plunk I'm using for playing around with the new Router 3.0 alpha currently available in Angular 2. It works well in general, but the issue is that once I click on a link that routes to the 'detail' ponent with a particular ID, it never changes when I click on a different link with a different ID. The ponent is never being reinstantiated, so it only ever shows what it was passed the very first time it is loaded.

Here's the ponent in question:

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 demonstrating the problem. Click on one author name and then another to see it not change.

• javascript
• angular
• angular2-routing
• angular2-ponents
• angular2-router3

3 Answers 3

In your ContactsDetailComponent, change the OnInit to this:

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

Worked for me in your Plunk.

There appear to be multiple lifeCycle hooks that could possibly be used for this. I managed to get the desired behavior using the DoCheck interface and implementing the associated ngDoCheck() method in the ponent class, as seen below.

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 with the updated code.

I'm not convinced this is the best/correct lifecycle hook to use, though. Perhaps there is some sort of hook available from the Router that would serve this better.

Another way to do this:

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

Here retrieve the route params from an Observable. The advantage of using an Observable over Snapshot is to reuse the ponent without instantiating it again. Looks like this is the remended way of doing this as per Angular 2.0 final documentation.