Angular 2 - Ricarica componente quando il router ha fatto nuovamente clic su

Question

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

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

ho seguente modello nei miei 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 seguenti percorsi 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 la mia Page1Component ha seguente modulo 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 clicco su Pagina1 routerLink nell'intestazione <li><a [routerLink]="['/page1']">Page1</a></li>, si carica il Page1Component in <router-outlet></router-outlet>. Riempio alcuni dettagli in forma e quando clicco su Page1 routerLink di nuovo nell'intestazione prima di inviare il modulo, voglio che Page1Component si riattacchi in modo che il mio modulo arrivi allo stato iniziale ma non fa nulla al clic. Ho provato a ripristinare il modulo in routerOnActivate() e routerCanDeactivate() ma nessuna delle funzioni è stata chiamata. Quindi, in sostanza, voglio caricare nuovamente il componente quando faccio clic su [routerLink]

Per favore fatemi sapere se posso spiegare meglio.

Answer 1

È possibile utilizzare l'evento (click) un codice di navigazione su un componente fittizio e quindi di nuovo sul componente precedente. C'è un parametro in router.navigate() per saltare le modifiche alla cronologia in modo che il pulsante Indietro continui a funzionare con questo hack.

Answer 2

Un altro approccio sarebbe quello di rimuovere il routerLink, e naviagate tramite il codice:

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

Ora gotoPage1 solo aggiunge un numero # X per URL esistente

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

Answer 3

Si può prendere cura di questo scenario utilizzando il percorso fittizio,

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

Aggiungi un percorso 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 changeRoute funzione:

Questo sarà nuovamente rendere il componente e il resto tutto sarà curato da Angolare.