title: why my RouteParams in angular2 didn't refresh in angular2?
body: <p>My RouteParams didn't work well when I click "edit" button.</p>
  
  <p><a href="https://i.stack.imgur.com/Kk5Zu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kk5Zu.png" alt="first view here"></a></p>
  
  <p>in the first view I click the edit btn on the <strong>bob row</strong> 
  and this is the second view<a href="https://i.stack.imgur.com/si0s4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/si0s4.png" alt="second view"></a></p>
  
  <p>now i click the back button in the browser and it goes back to fist view. then i click the edit btn on the <strong>pop row</strong> and this is the third view(same as second view which is wrong)<a href="https://i.stack.imgur.com/9mbOu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9mbOu.png" alt="third view should be pop data but it is not"></a></p>
  
  <p>and I put some console to debug. this is the console log<a href="https://i.stack.imgur.com/H5X9J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H5X9J.png" alt="console.log"></a></p>
  
  <p>here is my code for the first view when i click the edit button, it fire the func and record the 1 and 3 records in the console.log picture</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {CORE_DIRECTIVES} from 'angular2/common';
  import { Router, RouteParams, ROUTER_DIRECTIVES } from 'angular2/router';
  import {MailingListService} from'../../services/mailing-list/mailing-lists.service'
  import {Subscriber} from '../../models/subscriber/subscriber';
  import 'rxjs/Rx';
  import {Observable} from 'rxjs/Rx';
  
  @Component({
  selector: 'subscriber-list-edit-view',
  templateUrl: './app/components/subscriber-list-editor-view/subscriber-list-editor-view.html',
  directives: [ROUTER_DIRECTIVES]
  })
  
  export class EditSubscriberListViewComponent {
  
  subscribers: Subscriber[];
  id: string;
  constructor(private mailingListsService: MailingListService, params: RouteParams, private router: Router) {
  
      this.init(this.id = params.get("id"));
  }
  
  
  init(id: string) {
      this.mailingListsService.getSubscribers(this.id).subscribe(x =&gt; {
          this.subscribers = x;
      });
  }
  //this is fired when click the edit button
  editSubscriber(subscriber: Subscriber) {
  
      this.router.navigate(['Subscribers.Edit', { id: this.id, subscriber: subscriber }]);
      console.log(subscriber);//this print the first and third record in console.log
  }
  
  
  
  deleteSubscriber(subscriber: Subscriber) {
  
      this.mailingListsService.deleteSubscriber(this.id, subscriber)
          .subscribe(() =&gt; { this.init(this.id) });
  
  }
  
  
  }
  </code></pre>
  
  <p>here is my code for the second view after i click the edit button and jump to the edit view, it fire the constructor and record the 2 and 4 records in the console.log picture</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import { Router, RouteParams } from 'angular2/router';
  import {CORE_DIRECTIVES} from 'angular2/common';  
  import {Subscriber}from '../../models/subscriber/subscriber';
  import {MailingListService} from'../../services/mailing-list/mailing-lists.service'
  
  @Component({
  selector: 'create-subscriber-view',
  templateUrl: './app/components/subscriber-creator-view/subscriber-creator-view.html'
  })
  
  export class CreateSubscriberComponent {
  subscriber: Subscriber;
  id: string;
  subscriberId: string;  
  name: string;
  phoneNumber: string;
  email: string;
  isActivated: boolean;
  isBusy: boolean;
  isEdit: boolean;
  constructor(private mailingListService: MailingListService,private params: RouteParams, private router: Router) {
      this.id = params.get("id");
      this.subscriber = params.get("subscriber");
  
      console.log(params.get("subscriber")); //this doesn't work well,print the second and forth record in the console.log
  
      if (this.subscriber != null) { this.isEdit = true; this.name = this.subscriber.name; this.phoneNumber = this.subscriber.phoneNumber; this.email = this.subscriber.email; this.subscriberId = this.subscriber.id; this.isActivated = this.subscriber.isActivated;};          
  
  }
  
  create() {
      if (this.phoneNumber == null &amp;&amp; this.email == null) { alert("either phone or email is required ! "); return; }
      this.isBusy = true;
      this.mailingListService.createSubscriber(this.id, {
          name: this.name,
          phoneNumber: this.phoneNumber,
          email: this.email
      })     
          .subscribe(() =&gt; { this.router.navigate(['MailingLists.View', { id: this.id }]) });  
  }  
  
  edit() {
      if (this.phoneNumber == null &amp;&amp; this.email == null) { alert("either phone or email is required ! "); return; }
      this.isBusy = true;
      this.mailingListService.editSubscriber(this.id, {
          name: this.name,
          phoneNumber: this.phoneNumber,
          email: this.email
      })
          .subscribe(() =&gt; { this.router.navigate(['MailingLists.View', { id: this.id }]) });  
  }
  </code></pre>
  
  <p>}</p>
  
  <p>as you can see, the fourth record in console.log is not correct so i assume it is the params problem. but i don't know why and how to solve the problem.</p>
  
  <p>and this is the routeconfig</p>
  
  <pre><code> { path: '/MailingLists/:id/Subscribers/Create', component: CreateSubscriberComponent, as: 'Subscribers.Create' },
  { path: '/MailingLists/:id/Subscribers/Edit', component: CreateSubscriberComponent, as: 'Subscribers.Edit' },
  </code></pre>
  
  <p>create and edit use same component but different url.</p>