Angular 2 – Ricarica la componente quando il routerLink è nuovamente cliccato

Sto lavorando al progetto Angular 2 con la seguente struttura di file.

  • HeaderComponent.ts
  • AppComponent.ts
  • Page1Component.ts
  • Page2Component.ts

Ho il seguente model nel mio 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> 

con i seguenti routes nel mio 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"); }); } } 

e il mio Page1Component ha il seguente module di esempio

 <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> 

Così quando faccio clic su Page1 routerLink nell'intestazione <li><a [routerLink]="['/page1']">Page1</a></li> , carica il Page1Component in <router-outlet></router-outlet> . Riempisco alcuni dettagli in forma e quando faccio clic su Page1 routerLink nuovamente in intestazione prima di submit il module, voglio che Page1Component ricarichi così la mia forma sia in stato iniziale, ma non fa nulla a fare clic. Ho provato a ripristinare la forma in routerOnActivate() e routerCanDeactivate() ma nessuna delle funzioni è stata chiamata. Quindi fondamentalmente, voglio che il mio componente carichi nuovamente quando faccio clic su [routerLink]

Fathemes sapere se posso spiegare meglio.

Puoi prenderti cura di questo scenario utilizzando un path fittizio,

 <a (click)="changeRoute(url)"> 

Aggiungere un path fittizio al router:

 { path: 'dummy', component: dummyComponent } 

dummyComponent.ts

 //Dummy component for route changes @Component({ selector: 'dummy', template: '' }) export class dummyComponent{} 

Ora all'interno del componente aggiungere function changeRoute :

 changeRoute => (url){ self.router.navigateByUrl('/dummy', { skipLocationChange: true }); setTimeout(()=>self.router.navigate(['page1'])); } // 'skipLocationChange' will avoid /dummy to go into history API 

Questo renderà il vostro componente e rest tutto sarà curato da Angular.

È ansible utilizzare l'evento (click) e navigare nel codice a qualche componente fittizio e tornare nuovamente al componente precedente. C'è un parametro in router.navigate() per ignorare le modifiche della cronologia in modo che il button indietro continui a lavorare con questo hack.

Un altro approccio sarebbe quello di rimuovere il routerLink e navigare via il codice:

 <a (click)="gotoPage1()"> 

Ora gotoPage1 aggiunge semplicemente un numero #X all'URL esistente

 ... count: number = 2; gotoPage1(){ count++; return this.router.navigate(...'#'+count); }