evento angolare 2 quando si fa clic su [routerLink]

Question

Ho un semplice servizio di caricamento che nasconde e mostra determinati caricatori. Sto lavorando a qualcosa che verrà usato molto con connessioni lente e ho bisogno di mostrare/nascondere un loader tra i cambi di rotta.

posso nascondere il caricatore quando la nuova rotta è caricato con il seguente.

this._Router.subscribe(() => { 
    this._LoaderService.hide(); 
}) 

Sto cercando di trovare un modo che posso chiamare mia funzione this._LoaderService.show() immediatamente quando ogni [routerLink] si fa clic (all'inizio del cambiamento percorso, non alla fine).

ho dato un'occhiata in giro e ho provato https://angular.io/docs/ts/latest/api/router/Router-class.html ma io non riesco a capirlo.

Qualsiasi aiuto apprezzato

Answer 1

è possibile creare il proprio direttiva routerLink estendendo quello di default https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts e sovrascrivere il onClick()

Simile a micronyks rispondere

<a [routeLink]=['User'] (click)="loaderService.show()">User</a> 

dovrebbe funzionare così, ma si deve aggiungere l'everywhwere click handler.

Answer 2

Con questa quantità di informazioni non è possibile dirvi modo corretto, si prega di notare anche questo che l'attuazione del servizio loader varia in base alla implementazione router.

O si deve estendere la route-outlet classe e dovrebbe trattare loaderService lì o si deve gestire click del legame con la propria come,

<a [routeLink]=['User']>User</a> 

chage a,

<a (click)="changeRoute('User')">User</a> 

poi,

import { Router } from '@angular/router'; 

constructor(private router: Router){} 

changeRoute(routeValue) { 
    this._LoaderService.show(); 
    //this will start the loader service. 

    this.router.navigate([routeValue]); 
    // you have to check this out by passing required route value. 
    // this line will redirect you to your destination. By reaching to destination you can close your loader service. 
    // please note this implementation may vary according to your routing code. 

} 

E quando un particolare percorso/link/component Beco mes active, all'interno di quel componente puoi chiudere il tuo servizio di caricamento quando e dove vuoi.

Answer 3

ho avuto bisogno abbastanza simile per l'integrazione barra di navigazione di bootstrap in Angular2 app.

La soluzione mi è venuta era vincolante una variabile booleana per controllare lo stato di commutazione della barra di navigazione (equivalente a nascondere e mostrare sul tuo caso).

Una volta che l'utente fa clic sull'icona hamburger o la lista non ordinata dei routerLinks, la variabile è stato fissato di conseguenza. Nota lego l'evento click sul padre delle ancore che eseguono effettivamente il routing in Angular.

Sembra più conveniente quindi estendere la direttiva routerLink.

<nav class="navbar navbar-default navbar-custom {{isfixed}} {{istransparent}}" *ngIf="showNav" aria-expanded="false"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header page-scroll"> 
       <button (click)="isCollapsed = !isCollapsed" type="button" class="navbar-toggle collapsed"> 
        <span class="sr-only">Toggle navigation</span> 
        <i class="fa fa-bars"></i> 
       </button> 
       <a routerLink="/home" routerLinkActive="active" class="navbar-brand"> 
        <span><img src="assets/icon/android-icon-36x36.png"></span> 
        {{brandText}} 
       </a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" 
      [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}"> 
       <ul class="nav navbar-nav navbar-right" (click)="isCollapsed = !isCollapsed"> 
        <li> 
         <a routerLink="/home" routerLinkActive="active">Home</a> 
        </li> 
        <li> 
         <a routerLink="/about" routerLinkActive="active">About</a> 
        </li> 
        <li> 
         <a routerLink="/posts" routerLinkActive="active">Posts</a> 
        </li> 
        <li> 
         <a routerLink="/contact" routerLinkActive="active">Contact</a> 
        </li> 
       </ul> 
      </div> <!-- /.navbar-collapse --> 
     </div> <!-- /.container --> 
</nav> <!-- NAV -->