javascript - Angular2 component doesn't detect routing parameter updates (Router 3.0) - Stack Overflow

admin管理员组

文章数量:1425695

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

Share Improve this question Follow edited Jun 25, 2016 at 12:16 Michael Oryl asked Jun 24, 2016 at 14:06 Michael OrylMichael Oryl 21.7k1515 gold badges8181 silver badges118118 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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.

本文标签： javascriptAngular2 component doesn39t detect routing parameter updates (Router 30)Stack Overflow