@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. 基于Linux系统的Nagios网络管理模块的实现

    基于Linux 系统的Nagios网络管理模块的实现 1.引言 随着计算机网络的普及,网络管理已成为信息时代中最重要的问题之一.在现有的技术条件下,人们希望有一个更加稳定可靠的网络环境.计算机网络管理 ...

  2. Vue 的 createElement 函数的参数问题的小笔记

    官方文档的说明. 第二个参数的值是要生成的标签的属性数据.点击查看详情. 第三个参数则是组件标签内的数据,数据里面的内容会渲染在第一个参数的标签内.通常会在此指定各插槽 slot 对应的位置,也可以在 ...

  3. JS 原型模式创建对象

    例子: class Test { constructor(val) { this.val = val } walk() { console.log(this) console.log('walk') ...

  4. 【Codeforces Round #432 (Div. 1) A】 Five Dimensional Points

    [链接]点击打开链接 [题意] 给你n个5维的点. 然后让你以其中的某一个点作为起点a. 另选两个点b,c. 组成向量a->b,a->c 如果所有的a->b和a->c的夹角都是 ...

  5. 使用Intent的Flag设置启动參数

    Intent中关于激活Activity的Flag Intent类定义了一批常量,用于配置激活Activity时的相关參数; 在Intent中设置Flag ·调用Intent的setFlags()或ad ...

  6. 13. 关于IDEA工具在springboot整合mybatis中出现的Invalid bound statement (not found)问题

    在一切准备就绪之后,测试test,却出现了org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) ...

  7. 微服务实战(一):微服务架构的优势与不足 - DockOne.io

    原文:微服务实战(一):微服务架构的优势与不足 - DockOne.io [编者的话]本文来自Nginx官方博客,是微服务系列文章的第一篇,主要探讨了传统的单体式应用的不足,以及微服务架构的优势与挑战 ...

  8. 具体解释ebs接口之客户配置文件导入(二)

    ------------------------------------ -- 1a. Setup the Org_id ------------------------------------ ex ...

  9. App.js和App.css(用于移动应用的js和css)

    App.js和App.css(用于移动应用的js和css) 一.App.js和App.css(用于移动应用的js和css) App.js 是一个轻量级的 JavaScript UI 库,用来创建移动的 ...

  10. 支付宝支付返回通知时 notify_url和return_url的选择

    页面跳转同步通知页面特性(return_url特性) 买家在支付成功后会看到一个支付宝交易提示成功的页面,该页面会停留几秒,然后会自动跳转回商户指定的同步通知页面(参数return_url) 该页面中 ...