[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 ...
随机推荐
- node.js是什么
node.js是什么 一.总结 一句话总结:Node.js 就是运行在服务端的 JavaScript. 二.node.js是什么 简单的说 Node.js 就是运行在服务端的 JavaScript. ...
- 17.Node.js 回调函数--异步编程
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程 ...
- Shelled-out Commands In Golang
http://nathanleclaire.com/blog/2014/12/29/shelled-out-commands-in-golang/ Shelled-out Commands In Go ...
- 1.Dubbo教程
转自:https://blog.csdn.net/hellozpc/article/details/78575773 2. 什么是dubbo 2.1. 简介 DUBBO是一个分布式服务框架,致力于提供 ...
- 逆波兰法(计算器)程序<无括号版>
涉及队列.栈的运用. Java中队列可以用: Queue<String> q = new LinkedList(); 来声明,其主要的方法有: poll(),peak(),offer(), ...
- 【万里征程——Windows App开发】DatePickerFlyout、TimePickerFlyout的使用
已经有挺长时间没有更新这个专栏了,只是刚才有网友私信问我一个问题如今就火速更新上一篇~ 这一篇解说在WP上DataPickerFlyout和TimePickerFlyout的使用.但它们仅仅能在WP上 ...
- SN74HC573ANSR 锁存器
这是它的工作电压范围 这个是功能表,数电上曾经学过: 内部的框图,也是数电的知识:
- Vue里父子组间的通讯
父组件代码 <template> <div> <child @child-say="listenToBoy" :mes=count></c ...
- python输出杨辉三角
使用python列表,展示杨辉三角 # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan yanghui = [] fo ...
- Docker---(1)Docker 简介
原文:Docker---(1)Docker 简介 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_39 ...