Angular/Angular2, Refresh Component From routerLink (NavBar) , If already in existing route

Question

If i am on same route , and i click again from nav bar. It doesn't do anything .

How can I refresh my component from navbar itself. Is there any method in routerLink.

<li [routerLinkActive]="['active']"><a [routerLink]="['/campaigns']">Creative</a></li>
<li [routerLinkActive]="['active']"><a [routerLink]="['/market-survey']">Survey</a></li>

click again means, suppose you click on creative (in my example) corresponding route will activate and component is loaded . Then I again click on creative . I want that component should refresh

Is this what you are seeking? https://stackoverflow.com/questions/21816722/angular-reload-current-route-and-reload-the-current-template — artgb, Oct 05 '17 at 11:00
Possible duplicate of https://stackoverflow.com/questions/40983055/how-to-reload-the-current-route-with-the-angular-2-router — Kishan Mundha, Oct 05 '17 at 11:12
In HTML we are using `[routerLink]` directive, which internally using `navigate()` function and when we are already on same route, it ignore next process. If you want to refresh whole page, you can try `location.reload()`. but this will reload full page. — Kishan Mundha, Oct 05 '17 at 11:28
what do you mean clicking again? do you mean clicking the same route and refresh the data in your other component? Also, it woud be helpful if you include your component.ts — brijmcq, Oct 05 '17 at 11:53
@brijmcq click again means, suppose you click on creative (in my example) corresponding route will activate and component is loaded . Then I again click on creative . I want that component should refresh — Ashutosh Jha, Oct 05 '17 at 16:33

score 1 · Answer 1 · answered Oct 06 '17 at 07:36

This can be fixed this by creating another component

refresh.component.ts

   import { Component, OnInit } from '@angular/core';
   import {Router, ActivatedRoute, Params} from '@angular/router';

   @Component({
     selector: 'app-refresh',
     template: `
       <p>
         refresh Works!
       </p>
     `,
     styles: []
   })
   export class RefreshComponent implements OnInit {

     constructor(private activatedRoute:ActivatedRoute,private route:Router) { }

     ngOnInit() {
       this.activatedRoute
           .queryParams
           .subscribe(params => {                
             if(params.url){
               this.route.navigate([params.url]);
             }
           });
     }

   }

app.routing

{path: 'refresh',component:RefreshComponent},

and my new naviation li is

   <li [routerLinkActive]="['active']"><a [routerLink]="['/refresh']" [queryParams]="{url:'campaigns'}" skipLocationChange="true">My AMP Creative</a></li>

Angular/Angular2, Refresh Component From routerLink (NavBar) , If already in existing route

1 Answers1