Угловое 2 rounterLink добавить обработчик

Question

меня routerLink используется в шаблоне, как это:

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

Можно ли добавить обработчик, который будет перехватывать это событие и выполнить какое-то действие - как лесозаготовительной мыши - прежде чем происходит маршрутизация ?

Answer 1

Просто добавьте свойство Клик:

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

Тогда в компоненте:

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

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