@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的更多相关文章

  1. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  2. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  3. angular的GitHub Repository Directive Example学习

    angular的GitHub Repository Directive Example学习 <!DOCTYPE html> <html ng-app="myApp" ...

  4. angular自定义指令-directive

    Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...

  5. Angular 2的12个经典面试问题汇总(文末附带Angular测试)

    Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...

  6. Angular 2的12个经典面试问题汇总(文末附带Angular測试)

    Angular作为眼下最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手.还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...

  7. -_-#【Angular】自定义指令directive

    AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...

  8. [Angular Directive] Implement Structural Directive Data Binding with Context in Angular

    Just like in *ngFor, you're able to pass in data into your own structural directives. This is done b ...

  9. [Angular Directive] Create a Template Storage Service in Angular 2

    You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. Y ...

随机推荐

  1. node.js是什么

    node.js是什么 一.总结 一句话总结:Node.js 就是运行在服务端的 JavaScript. 二.node.js是什么 简单的说 Node.js 就是运行在服务端的 JavaScript. ...

  2. 17.Node.js 回调函数--异步编程

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程 ...

  3. Shelled-out Commands In Golang

    http://nathanleclaire.com/blog/2014/12/29/shelled-out-commands-in-golang/ Shelled-out Commands In Go ...

  4. 1.Dubbo教程

    转自:https://blog.csdn.net/hellozpc/article/details/78575773 2. 什么是dubbo 2.1. 简介 DUBBO是一个分布式服务框架,致力于提供 ...

  5. 逆波兰法(计算器)程序<无括号版>

    涉及队列.栈的运用. Java中队列可以用: Queue<String> q = new LinkedList(); 来声明,其主要的方法有: poll(),peak(),offer(), ...

  6. 【万里征程——Windows App开发】DatePickerFlyout、TimePickerFlyout的使用

    已经有挺长时间没有更新这个专栏了,只是刚才有网友私信问我一个问题如今就火速更新上一篇~ 这一篇解说在WP上DataPickerFlyout和TimePickerFlyout的使用.但它们仅仅能在WP上 ...

  7. SN74HC573ANSR 锁存器

    这是它的工作电压范围 这个是功能表,数电上曾经学过: 内部的框图,也是数电的知识:

  8. Vue里父子组间的通讯

    父组件代码 <template> <div> <child @child-say="listenToBoy" :mes=count></c ...

  9. python输出杨辉三角

    使用python列表,展示杨辉三角 # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan yanghui = [] fo ...

  10. Docker---(1)Docker 简介

    原文:Docker---(1)Docker 简介 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_39 ...