Angular 2 routerLink 添加处理程序答案

【问题标题】：Angular 2 rounterLink add handlerAngular 2 routerLink 添加处理程序
【发布时间】：2017-02-17 02:05:52
【问题描述】：

我的模板中使用了routerLink，如下所示：

<li><a [routerLink]="[ 'discounts' ]">Wczesna oplata</a></li>

是否可以在路由发生之前添加一个处理程序来拦截该事件并执行一些操作（例如记录单击）？

【问题讨论】：

标签： angular routing handler routerlink

【解决方案1】：

只需添加一个点击属性：

<li ><a [routerLink]="[ 'discounts' ]" (click)="clicked()">Wczesna oplata</a></li>

然后在组件中：

export class AppCom {
    clicked() {
        console.log('clicked');
    }
}

【讨论】：

【解决方案2】：

嗯，@John 提到的应该可以，但我会建议你为你的问题提供一个通用的解决方案。通过添加指令组件，您不必在任何地方添加您的日志记录方法：

import {Directive, Renderer, ElementRef, HostListener} from "@angular/core";

@Directive({
    selector: '[routerLink]'
})

export class FooClickTracker {

    constructor(elementRef: ElementRef, renderer: Renderer) {
        renderer.listen(elementRef.nativeElement, 'click', (event) => {
            console.log('clicked', event, elementRef.nativeElement);
        });
    }
}

您可以验证侦听器将在路由发生之前执行：

constructor(elementRef:ElementRef, renderer:Renderer) {
    renderer.listen(elementRef.nativeElement, 'click', (event) => {
        console.log('clicked', event, elementRef.nativeElement);
        this.sleep(5000)
    });
}

// we can mock waiting for small period of time http://stackoverflow.com/questions/16873323/javascript-sleep-wait-before-continuing
private sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds) {
            break;
        }
    }
}

【讨论】：