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

Question

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

我可以在加载新路由时隐藏加载程序.

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

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

我看了一下,我试过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

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

类似于micryks的答案

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

应该工作,但你必须每隔一段时间添加点击处理程序.