Angular 2 - Reload component when routerLink clicked again
Solution 1
You can take care of this scenario by using dummy route,
<a (click)="changeRoute(url)">
Add one dummy route to your router:
{ path: 'dummy', component: dummyComponent }
dummyComponent.ts
//Dummy component for route changes
@Component({
selector: 'dummy',
template: ''
})
export class dummyComponent{}
Now inside your component add changeRoute function:
changeRoute(url) {
this.router.navigateByUrl('/dummy', { skipLocationChange: true });
setTimeout(() => this.router.navigate(url));
}
// 'skipLocationChange' will avoid /dummy to go into history API
This will re render your component and rest all will be taken care by Angular.
Solution 2
You could use the (click)
event an navigate in code to some dummy component and then again back to the previous component. There is a parameter in router.navigate()
to skip history changes so the back button keeps working with this hack.
Comments
-
Ankush almost 2 years
I am working on Angular 2 project with following file structure.
- HeaderComponent.ts
- AppComponent.ts
- Page1Component.ts
- Page2Component.ts
I have following template in my HeaderComponent.ts
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a [routerLink]="['']">Home</a></li> <li><a [routerLink]="['/page1']" >Page1</a></li> <li><a [routerLink]="['/page2']">Page2</a></li> </ul> </div> </div> </nav>
with following routes in my AppComponent
@Component({ selector: 'my-app', template: ` <my-header></my-header> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES, HeaderComponent] }) @Routes([ {path: '/', component: HomeComponent}, {path: '/page1', component: Page1Component} {path: '/page2', component: Page2Component} ]) export class AppComponent { ngAfterViewInit() { //To show the active tab in navbar $(".nav a").on("click", function () { $(".nav").find(".active").removeClass("active"); $(this).parent().addClass("active"); }); } }
and my Page1Component has following sample form
<section class="col-md-8 col-md-offset-2"> <form [ngFormModel]="myForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="firstName">First Name</label> <input [ngFormControl]="myForm.find('firstName')" type="text" id="firstName" class="form-control"> </div> <div class="form-group"> <label for="lastName">Last Name</label> <input [ngFormControl]="myForm.find('lastName')" type="text" id="lastName" class="form-control"> </div> <div class="form-group"> <label for="email">Mail</label> <input [ngFormControl]="myForm.find('email')" type="email" id="email" class="form-control"> </div> <div class="form-group"> <label for="password">Password</label> <input [ngFormControl]="myForm.find('password')" type="password" id="password" class="form-control"> </div> <button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Sign Up</button> </form> </section>
So when I click on Page1 routerLink in header
<li><a [routerLink]="['/page1']">Page1</a></li>
, it loads the Page1Component in<router-outlet></router-outlet>
. I fill some details in form and when I click on Page1 routerLink again in header before submitting the form, I want Page1Component to reload so my form comes to initial state but it doesn't do anything on click. I tried to reset form inrouterOnActivate()
androuterCanDeactivate()
but none of the functions being called. So basically, I want my component to load again when I click on [routerLink]Please let me know if I can explain better.
-
Pritesh Acharya almost 8 yearsDid you find any fix for this?
-
RyuCoder almost 4 years
-
Pritesh Acharya over 7 yearsDo you know the parameter to skip the history?
-
Günter Zöchbauer over 7 yearsThe current router doesn't have it yet. AFAIR it is in master already but has yet to be shipped (with the next update RC.5).
-
Günter Zöchbauer over 7 yearsJust saw, it isn't even merged yet. Might take a while longer to land github.com/angular/angular/pull/9608
-
Pritesh Acharya over 7 yearsI find a flag in router-deprecated _skipLocationChange which skips the history.
-
Alejandro Lora over 7 yearsIn NavigationExtras from the angular/route you have a property skipLocationChange, just add it as 2nd parameter of router.navigate method. @PriteshAcharya