Question

我有一个简单的Loader服务，隐藏并显示某些加载器。我正在研究一些将用于慢速连接的东西，我需要在路由更改之间显示/隐藏加载器。

我可以在加载新路径时隐藏加载程序。

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课程并在那里处理loaderService或者您必须自己处理链接的点击，

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

chage it to，

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

您可以通过扩展默认值https://github.com/angular/angular/blob/master/packages/router/src/directives/router_link.ts并覆盖routerLink

来创建自己的onClick()指令

类似于micryks回答

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

也可以正常工作，但你必须每隔一段时间添加点击处理程序。

Answer 3

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

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

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

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

3 个答案: