Angular 2 event wenn [routerLink] geklickt wurde

Question

Ich habe einen einfachen Loader Service der bestimmte Loader versteckt und anzeigt. Ich arbeite an etwas, das bei langsamen Verbindungen viel benutzt wird und ich muss einen Loader zwischen Routenänderungen anzeigen/verstecken.

Ich kann den Loader ausblenden, wenn die neue Route mit folgenden geladen wird.

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

Ich versuche, einen Weg zu finden, die ich sofort meine this._LoaderService.show() Funktion aufrufen kann, wenn eine [Router] (zu Beginn der Route zu ändern, nicht das Ende) angeklickt wird.

Ich habe mich umgesehen und ich habe versucht https://angular.io/docs/ts/latest/api/router/Router-class.html, aber ich kann nicht scheinen, es herauszufinden.

Jede Hilfe willkommen

Answer 1

Sie könnten Ihre eigene routerLink Richtlinie durch die Verlängerung der Standard ein https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts und überschreiben die onClick()

Ähnlich micronyks antworten

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

sollte auch funktionieren, aber Sie haben erstellen Sie die Click-Handler everywhwere hinzuzufügen.

Answer 2

Bei so vielen Informationen, die es nicht möglich ist, korrekte Art und Weise zu sagen, beachten Sie bitte auch, dass dies loader-Service-Implementierung ist je nach Ihrer Router-Implementierung.

Entweder Sie haben route-outlet Klasse zu erweitern und loaderService dort behandeln sollte oder Sie müssen Link Klicken Sie durch Ihre eigene handhaben wie,

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

chage es,

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

dann,

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. 

} 

Und wenn eine bestimmte Route/Link/Komponente beco mes aktiv, können Sie innerhalb dieser Komponente Ihren Loader-Service jederzeit und überall schließen.

Answer 3

Ich hatte ziemlich ähnliche Notwendigkeit, wenn Bootstrap Navbar in Angular2 App zu integrieren.

Die Lösung, die ich kam, war eine boolesche Variable zu binden, um den Umschaltstatus der Navigationsleiste zu steuern (entspricht dem Ausblenden und Anzeigen in Ihrem Fall).

Sobald der Benutzer auf das Hamburger-Icon oder die ungeordnete Liste der RouterLinks klickt, wird die Variable entsprechend gesetzt. Hinweis: Ich binde das Click-Ereignis auf das übergeordnete Element der Anker, die das Routing tatsächlich in Angular ausführen.

Sieht bequemer als die Erweiterung der Anweisung 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 -->