クエリパラメータ変更角度2でコンポーネントが再開されない

Question

検索機能を実装するために、角度2と最新のルータコンポーネントを使用しています。初めて検索ボタンをクリックすると、ルータは検索コンポーネントに移動し、サービスからデータを取得します。その後、私は検索テキストのデータを変更するが、クエリパラメータの変更は変更されません。

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; 
      }); 
    } 

} 

私は今、何をすべき？助けてください。前もって感謝します。

Answer 1

これは設計通りです。ルートパラメータのみが変更されると、コンポーネントは再利用されます。

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

がありカスタム動作をサポートする計画ですが、おそらく前の最終ません：

あなたはそれがパラメータを変更するたびに呼び出されるようにgetSearchResult()subscribe()内を移動することができます。