title: Component doesn't reinit on query parameter change angular 2
body: <p>I'm using angular 2 and latest router component to implement a search feature. When I first time clicked the search button then router navigate to search component and retrieve data from the service. After that when I change the search text data does not changes but query parameter changes. </p>
  
  <p><strong>navbar.component.ts</strong></p>
  
  <pre><code>    @Component({
      selector:'navbar',
      template:`
      &lt;div class="input-group"&gt;
         &lt;input type="text" class="form-control" placeholder="Search" 
         name="srch-term" id="srch-term" [(ngModel)] = "search_text"&gt;
      &lt;div class="input-group-btn"&gt;
         &lt;button class="btn btn-default" (click)="search()"&gt;
           &lt;i class="fa fa-search"&gt;&lt;/i&gt;
         &lt;/button&gt;
     &lt;/div&gt;
       &lt;/div&gt;`,
          styleUrls:['app/navbar/navbar.component.css'],
          directives:[LoginComponent,SignupComponent,ROUTER_DIRECTIVES]
          })
      export class NavbarComponent {
          State: NavbarState = "PUBLIC";
  
          profileNavElement: NavbarElement;
          userNameString: string;
          search_text : string = '';
      search(){
              console.log(this.search_text);
              if(this.search_text){
                  this.router.navigate(["/search"],{
                      queryParams:{query:this.search_text}
                  });
              }
  
          }
  </code></pre>
  
  <p><strong>serach.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, DoCheck } from '@angular/core';
  import { ActivatedRoute,Router,ROUTER_DIRECTIVES}  from '@angular/router';
  import { SearchService } from './search.service';
  import {Location} from '@angular/common';
  
  @Component({
      moduleId: module.id,
      selector: 'search',
      templateUrl: 'search.component.html',
      styleUrls:['./search.component.css'],
      providers:[ROUTER_DIRECTIVES,SearchService]
  })
  export class SearchComponent implements OnInit {
  
      query:string = '';
      videos:Object[] ;
      resultFound:boolean=false ;
      resultNotFound:boolean=false;
  
      constructor(private route:ActivatedRoute,
                  private router:Router,
                  private _searchService:SearchService) {
  
                  }
  
      ngOnInit() {
          this.router.routerState
              .queryParams
              .subscribe(data =&gt; {
                  this.query = data['query'];
          });
          this.getSearchResult();
      }
  
  
      getSearchResult(){
          this._searchService.getSearchResult(this.query)
              .subscribe((result) =&gt; {
                  this.resultFound = true;
                  this.resultNotFound = false;
                  this.videos = result;
              },
              (error) =&gt; {
                  this.resultFound = false;
                  this.resultNotFound = true;
              });
      }
  
  }
  </code></pre>
  
  <p>What should I do now ? Please help. Thanks in advance.</p>