[routerLink]がクリックされたときの角度2のイベント

Question

特定のローダーを隠して表示する単純なローダーサービスがあります。遅い接続で多く使用されるものに取り組んでいます。ルート変更の間にローダーを表示/非表示にする必要があります。

新しいルートがロードされると、ローダーを非表示にすることができます。

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

は、私がどの[routerLink]（ルート変更ではなく、最後の開始時に）クリックされたとき、私はすぐに私の this._LoaderService.show()関数を呼び出すことができる方法を見つけようとしています。

私は周りを見て、私はhttps://angular.io/docs/ts/latest/api/router/Router-class.htmlを試しましたが、私はそれを把握していないようです。

すべてのヘルプは、あなたに正しい方法を伝えることはできないこれだけの情報では

Answer 1

あなたはデフォルトの1 https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.tsを拡張することによって、独自のrouterLinkディレクティブを作成し、micronyksと同様にonClick()

が

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

に答えるオーバーライドすることができますが、同様に動作するはずですが、あなたは、クリックハンドラeverywhwereを追加する必要があります。

Answer 2

を高く評価し、また、これを注意してくださいそのローダサービスの実装は、ルータの実装に応じて異なります。

あなたがroute-outletクラスを拡張する必要があり、そこにloaderServiceを処理する必要がありますまたはあなた自身のように、

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

チャゲそれまで、

その後、

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

、

により、リンクのクリックを処理する必要がどちらか

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. 

} 

特定のルート/リンク/コンポーネントがあなたがいつでもどこでもあなたのローダーサービスを閉じることができます。

Answer 3

私は、Angular2アプリにブートストラップnavbarを統合する際に、かなり似ていました。

私が思いついた解決策は、navbarのトグル状態を制御するブール変数をバインドすることでした（あなたの場合はhideとshowに相当）。

ユーザーがハンバーガーアイコンまたはrouterLinkの順序付けられていないリストをクリックすると、それに応じて変数が設定されました。注意実際にはAngularでルーティングするアンカーの親にclickイベントをバインドします。

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