标签：one for listen event ack exp elements bsp services
A @Directive is used to add behavior to elements and components in your application. This makes @Directives ideal for behaviors such as "tracking" which don‘t belong in a Component, but do belong as a behavior in your application.
import {Directive, HostListener, Input} from ‘@angular/core‘;
import {TrackingService} from "../services/tracking.service";
@Directive({
selector: ‘[track]‘
})
export class TrackDirective {
@Input() track;
constructor(private trackingService: TrackingService) { }
@HostListener(‘click‘, [‘$event‘]) onClick(event) {
this.trackingService.tracking(
event,
this.track
)
}
}
import { Injectable } from ‘@angular/core‘;
@Injectable()
export class TrackingService {
logs = [];
constructor() { }
tracking(event, log) {
this.logs.push({
event,
log
});
console.log(this.logs)
}
}
<button [track]="‘one is clicked‘">One</button> <button [track]="‘two is clicked‘">Two</button> <button [track]="‘three is clicked‘">Three</button>
[Angular Directive] Build a Directive that Tracks User Events in a Service in Angular 2
标签：one for listen event ack exp elements bsp services
原文地址：http://www.cnblogs.com/Answer1215/p/6211995.html
