Zdarzenie Angular 2 po kliknięciu dowolnego [routerLink]

Question

Mam prosty program ładujący, który ukrywa i pokazuje określone ładowarki. Pracuję nad czymś, co będzie używane z powolnymi połączeniami i muszę pokazać/ukryć program ładujący pomiędzy zmianami trasy.

Mogę ukryć ładowarkę po załadowaniu nowej trasy.

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

Staram się znaleźć sposób, że można od razu zadzwonić do mojego this._LoaderService.show() funkcję, gdy każdy [routerLink] kliknięciu (na początku zmiany trasy, nie do końca).

Rozejrzałem się i próbowałem https://angular.io/docs/ts/latest/api/router/Router-class.html, ale nie mogę tego rozgryźć.

Każda pomoc mile widziane

Answer 1

Można by stworzyć swój własny dyrektywę routerLink rozszerzając domyślny https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts i zastąpić onClick()

podobne do micronyks odpowiedzieć

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

powinien działać jak dobrze, ale trzeba dodać everywhwere kliknięcie uchwytu.

Answer 2

Dzięki temu wiele informacji nie jest możliwe, aby powiedzieć wam właściwą drogę, to należy pamiętać, że realizacja usług ładowarka zmienia się w zależności od implementacji routera również.

Albo trzeba rozszerzyć route-outlet klasy i powinien obsługiwać loaderService tam albo trzeba obsłużyć linku jako kliknięcie przez własną podobnych

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

chage to TO,

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

Następnie

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. 

} 

A kiedy konkretna trasa/link/komponent stanie się mes aktywne, w ramach tego komponentu możesz zamknąć usługę programu ładującego zawsze i wszędzie tam, gdzie chcesz.

Answer 3

Miałem dość podobną potrzebę przy integrowaniu paska nawigacyjnego bootstrap z aplikacją Angular2.

Rozwiązanie, które wymyśliłem, wiąże zmienną binarną, aby kontrolować stan przełączania paska nawigacyjnego (odpowiednik ukrycia i pokazania na obudowie).

Gdy użytkownik kliknie ikonę hamburgera lub nieuporządkowaną listę routerLinks, zmienna została odpowiednio ustawiona. Uwaga: Wiązanie zdarzenia kliknięcia w obiekcie nadrzędnym zakotwiczeń, które faktycznie wykonują routing w Angular.

Wygląda wygodniej niż rozszerzenie dyrektywy 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 -->