Component doesn't reinit on query parameter change angular 2

Question

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.

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

}

What should I do now ? Please help. Thanks in advance.

Günter Zöchbauer · Accepted Answer · 2016-09-01 06:05:23Z

3

That is as designed. When only route parameters change the component is reused.

You can just move the getSearchResult() inside subscribe() so that it is called every time when the parameters change:

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

There are plans to support custom behavior but probably not before final.

answered Sep 1, 2016 at 6:05

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Component doesn't reinit on query parameter change angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related