单击任何 [routerLink] 时的 Angular 2 事件答案

【问题标题】：Angular 2 event when any [routerLink] is clicked单击任何 [routerLink] 时的 Angular 2 事件
【发布时间】：2016-07-12 20:06:12
【问题描述】：

我有一个简单的加载器服务，可以隐藏和显示某些加载器。我正在研究一些会在连接速度慢的情况下大量使用的东西，我需要在路由更改之间显示/隐藏一个加载器。

当新路由加载以下内容时，我可以隐藏加载器。

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

我正在尝试找到一种方法，以便在单击任何 [routerLink] 时（在路由更改开始时，而不是结束时）立即调用我的 this._LoaderService.show() 函数。

我环顾四周并尝试了https://angular.io/docs/ts/latest/api/router/Router-class.html，但我似乎无法弄清楚。

任何帮助表示赞赏

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

有了这么多信息，无法告诉您正确的方法，还请注意，加载器服务的实现会根据您的路由器实现而有所不同。

要么你必须扩展 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.

}

当某个特定的路由/链接/组件变为活动状态时，您可以在该组件内随时随地关闭您的加载器服务。

【讨论】：

但是routerLinkActive 呢？

【解决方案2】：

您可以通过扩展默认的https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts 并覆盖onClick() 来创建自己的routerLink 指令

类似于 micronyks 的回答

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

应该也可以，但是您必须在每个地方都添加点击处理程序。

【讨论】：

【解决方案3】：

在将引导导航栏集成到 Angular2 应用程序时，我也有非常相似的需求。

我想出的解决方案是绑定一个布尔变量来控制导航栏的切换状态（相当于在您的情况下隐藏和显示）。

一旦用户点击汉堡包图标或 routerLinks 的无序列表，变量就会被相应地设置。请注意，我将 click 事件绑定在实际在 Angular 中进行路由的锚点的父级上。

看起来比扩展 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 -->

【讨论】：