Angular 单击任何 [routerLink] 时发生 2 个事件

Question

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

我可以在新路由加载时隐藏加载器，如下所示。

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

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

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

感谢任何帮助

Answer 1

有了这么多信息，我们无法告诉您正确的方法，另请注意，加载程序服务实现因路由器实现而异。

要么你必须扩展 route-outlet class 并且应该在那里处理 loaderService 或者你必须自己处理 link 的点击，

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

}

当特定 route/link/component 激活时，您可以在该组件内随时随地关闭加载程序服务。

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

应该也能正常工作，但您必须在所有地方添加点击处理程序。

Answer 3

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

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

一旦用户点击汉堡包图标或 routerLinks 的无序列表，就会相应地设置变量。请注意，我将点击事件绑定到实际在 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 -->

Angular 单击任何 [routerLink] 时发生 2 个事件

Angular 2 event when any [routerLink] is clicked

angular

angular2-routing