Komponente wird nicht auf Abfrage Parameteränderung angular 2

Question

Ich benutze Winkel 2 und neueste Router-Komponente, um eine Suchfunktion zu implementieren. Wenn ich zum ersten Mal auf die Suchtaste klicke, navigiere der Router zur Suche nach Komponenten und zum Abrufen von Daten aus dem Dienst. Danach ändere ich die Suchtextdaten nicht, sondern ändere die Abfrageparameter.

navbar.component.ts

@Component({ 
    selector:'navbar', 
    template:` 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search" 
     name="srch-term" id="srch-term" [(ngModel)] = "search_text"> 
    <div class="input-group-btn"> 
     <button class="btn btn-default" (click)="search()"> 
     <i class="fa fa-search"></i> 
     </button> 
    </div> 
    </div>`, 
     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} 
       }); 
      } 

     } 

serach.component.ts

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 => { 
       this.query = data['query']; 
     }); 
     this.getSearchResult(); 
    } 


    getSearchResult(){ 
     this._searchService.getSearchResult(this.query) 
      .subscribe((result) => { 
       this.resultFound = true; 
       this.resultNotFound = false; 
       this.videos = result; 
      }, 
      (error) => { 
       this.resultFound = false; 
       this.resultNotFound = true; 
      }); 
    } 

} 

Was soll ich jetzt tun? Bitte helfen Sie. Danke im Voraus.

Answer 1

Das ist wie vorgesehen. Wenn nur Routenparameter geändert werden, wird die Komponente wiederverwendet.

Sie können nur die bewegen getSearchResult() innen subscribe() so dass es jedes Mal, wenn die Parameter ändern aufgerufen:

ngOnInit() { 
    this.router.routerState 
     .queryParams 
     .subscribe(data => { 
      this.query = data['query']; 
      this.getSearchResult(); 
    }); 
} 

Es individuelle Verhalten gibt Pläne zu unterstützen, aber wahrscheinlich nicht vor dem Finale.