[Angular Directive] Build a Directive that Tracks User Events in a Service in Angular 2
A @Directive
is used to add behavior to elements and components in your application. This makes @Directive
s 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的更多相关文章
- Angular之 Scope和 Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
- Angular自定义指令(directive)
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular的GitHub Repository Directive Example学习
angular的GitHub Repository Directive Example学习 <!DOCTYPE html> <html ng-app="myApp" ...
- angular自定义指令-directive
Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...
- Angular 2的12个经典面试问题汇总(文末附带Angular测试)
Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...
- Angular 2的12个经典面试问题汇总(文末附带Angular測试)
Angular作为眼下最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手.还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...
- -_-#【Angular】自定义指令directive
AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...
- [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 ...
- [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 ...
随机推荐
- 基于Linux系统的Nagios网络管理模块的实现
基于Linux 系统的Nagios网络管理模块的实现 1.引言 随着计算机网络的普及,网络管理已成为信息时代中最重要的问题之一.在现有的技术条件下,人们希望有一个更加稳定可靠的网络环境.计算机网络管理 ...
- Vue 的 createElement 函数的参数问题的小笔记
官方文档的说明. 第二个参数的值是要生成的标签的属性数据.点击查看详情. 第三个参数则是组件标签内的数据,数据里面的内容会渲染在第一个参数的标签内.通常会在此指定各插槽 slot 对应的位置,也可以在 ...
- JS 原型模式创建对象
例子: class Test { constructor(val) { this.val = val } walk() { console.log(this) console.log('walk') ...
- 【Codeforces Round #432 (Div. 1) A】 Five Dimensional Points
[链接]点击打开链接 [题意] 给你n个5维的点. 然后让你以其中的某一个点作为起点a. 另选两个点b,c. 组成向量a->b,a->c 如果所有的a->b和a->c的夹角都是 ...
- 使用Intent的Flag设置启动參数
Intent中关于激活Activity的Flag Intent类定义了一批常量,用于配置激活Activity时的相关參数; 在Intent中设置Flag ·调用Intent的setFlags()或ad ...
- 13. 关于IDEA工具在springboot整合mybatis中出现的Invalid bound statement (not found)问题
在一切准备就绪之后,测试test,却出现了org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) ...
- 微服务实战(一):微服务架构的优势与不足 - DockOne.io
原文:微服务实战(一):微服务架构的优势与不足 - DockOne.io [编者的话]本文来自Nginx官方博客,是微服务系列文章的第一篇,主要探讨了传统的单体式应用的不足,以及微服务架构的优势与挑战 ...
- 具体解释ebs接口之客户配置文件导入(二)
------------------------------------ -- 1a. Setup the Org_id ------------------------------------ ex ...
- App.js和App.css(用于移动应用的js和css)
App.js和App.css(用于移动应用的js和css) 一.App.js和App.css(用于移动应用的js和css) App.js 是一个轻量级的 JavaScript UI 库,用来创建移动的 ...
- 支付宝支付返回通知时 notify_url和return_url的选择
页面跳转同步通知页面特性(return_url特性) 买家在支付成功后会看到一个支付宝交易提示成功的页面,该页面会停留几秒,然后会自动跳转回商户指定的同步通知页面(参数return_url) 该页面中 ...