Angular 2 reloads routerLink user clicks again

Question

I was looking for solution on SO but still don't solve this problem. When user clicks on <a> then he has to direct to component WrapPost and WrapPost shows him some information. But when user clicks on <a> second time then nothing happend. How activate multi click on routerLink and WrapPost will update everytime?

Component Search

<div class="formShell">
   <a class="aSearch" [routerLink]="['/search']" 
      [queryParams]="{category: selectedCategory, search: searchForm.value}">
   <input class="searchForm" placeholder="..." #searchForm>
</div>

Routes

const appRoutes: Routes = [
   { path: '', component: Home },
   { path: 'search', component: WrapPost},
   { path: 'login', component: Login },
   { path: '**', component: Error }
];

Possible duplicate of [Angular 2 - Reload component when routerLink clicked again](http://stackoverflow.com/questions/37645368/angular-2-reload-component-when-routerlink-clicked-again) — jigar gala, Feb 21 '17 at 04:15

score 2 · Answer 1 · answered Feb 12 '17 at 10:58

You mean you want to refresh data every time you click on the link.

Actually, you can do that either by decoupling data retrieval in a service and create a function (that uses the service to retrieve data) that should be called when clicking on the link. Something like this:

<a role="button" (click)="reloadData()"></a>

Or you can create a redirect component that its role is only to redirect to the search route. Something like this.

import {Component, OnInit} from "@angular/core";
import {Router} from "@angular/router";

@Component({
    selector: 'redirect',
    template: ''
})
export class RedirectComponent implements OnInit {

    constructor(private router: Router) {
    }

    ngOnInit() {
        this.router.navigate(['/search']);
    }

}

And add a route

const appRoutes: Routes = [
  // other routes
  { path: 'redirect', component: RedirectComponent},
];

And the link will be like this <a routerLink="/redirect"></a>

The first suggestion is much better than the second workaround solution.

score 1 · Answer 2 · answered Jul 18 '17 at 12:03

1

I'm sorry but I don't speak english.

So i will speak only code.

reload(link:string){
    this._router.navigate(['/'], {skipLocationChange: true})
        .then(() => { this._router.navigate([link]); });
}

answered Jul 18 '17 at 12:03

김석래

11
1

score 0 · Answer 3 · edited May 23 '17 at 12:02

I resolve my problem rederict to component Error that has path '**' and back to component WrapPost with setTimeout.

And look at this skipLocationChange it doesn't save history (realy necessary param).

Thanks this post Angular 2 - Reload component when routerLink clicked again especially jigar gala

HTML

<a class="aSearch" (click)="changeRoute('/search', searchForm.value)"></a>

Component Search

changeRoute(routeValue, searchForm) {
    this.router.navigate(['**'], {skipLocationChange: true});
    setTimeout(function(){
       this.router.navigate([routeValue], 
          {queryParams: {category: this.selectedCategory, search: searchForm}}
       ); 
    }.bind(this));

}

Angular 2 reloads routerLink user clicks again

3 Answers3

Linked