[Angular Directive] 3. Handle Events with Angular 2 Directives
A @Directive
can also listen to events on their host element using @HostListener
. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.
import {Directive, HostListener, HostBinding, Input} from '@angular/core'; @Directive({
selector: '[clickable]'
})
export class ClickableDirective {
@Input('clickable') text;
@HostBinding() get innerText() {
if(this.text) {
return this.text;
}
}
@HostListener('click', ['$event']) onClick(event) {
console.log(event); //MouseEvent
this.text = event.clientX;
}
}
We can add HostListener on the host element, and get '$event' pass to our handler function 'onClick'. Inside the function we are able to change the innerText of the directive.
[Angular Directive] 3. Handle Events with Angular 2 Directives的更多相关文章
- [Angular Directive] 2. Add Inputs to Angular 2 Directives
The @Input decorator allows you to pass values into your @Directive so that you can change the value ...
- angular directive scope
angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...
- [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2
Just like passing in an array to *ngFor, you can pass in any value into your structural directive s ...
- [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项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
- [Angular 2 Router] Configure Your First Angular 2 Route
Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...
- 【Angular专题】——(1)Angular,孤傲的变革者
目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
随机推荐
- 使用STS新的工作空间无需再配置
在你的新的工作空间中找到比如 F:\java-wokespace\你的新的工作空间名称\.metadata\.plugins\org.eclipse.core.runtime\.settings 找到 ...
- 关于EJB--实体Bean的BMP和CMP选择
EJB有两种主要类型BMP(Bean managed persistence )和CMP(Container managed persistence ),这两种类型各有优缺点. BMP是在Bean中完 ...
- 洛谷P3613 睡觉困难综合征(LCT)
题目: P3613 睡觉困难综合症 解题思路: LCT,主要是维护链上的多位贪心答案,推个公式:分类讨论入0/1的情况,合并就好了(公式是合并用的) 代码(我不知道之前那个为啥一直wa,改成结构体就好 ...
- 【2017"百度之星"程序设计大赛 - 初赛(B)】度度熊的交易计划
[链接]点击打开链接 [题意] 在这里写题意 [题解] 先设一个超级源点,向每个片区都建一条边,容量为b,费用为-a; 然后从每个片区再连一条边,指向一个超级汇点. 容量为d,费用为c; 然后从起点到 ...
- 洛谷 P2067 Cytus-Holyknight
P2067 Cytus-Holyknight 题目背景 本人最初作 以此纪念伟大的ios.安卓.PSV平台音乐游戏<cytus> 后续将不断更新. -------------Chapter ...
- 网页设计实战3 ufo类型的科技网页如何实现
网页设计实战3 ufo类型的科技网页如何实现 一.总结 一句话总结:基础的图片素材就是如何几张图片,这个效果只是通过jquery或者js让那个png图片旋转起来了,如此而已.其实核心就是一个trans ...
- django 简单会议室预约(1)
django 是python的一个web框架,为什么要用django,作者之前用过另一个框架flask,虽然flask比较简单很容易让人学,但是flask没有整体感,会让初学着茫然. 这里我们用dja ...
- ArcGIS教程:地理处理服务演示样例(河流网络)(三)
设置输出符号系统 步骤: 展开 StoweStreamNet.tbx 并双击创建河流网络模型. 接受默认的 45 公顷并单击确定以运行模型. StreamNet 图层将加入至 ArcMap. 右键单击 ...
- SSMM框架
IDEA搭建SSMM框架(详细过程) 相关环境 Intellij IDEA Ultimate Tomcat JDK MySql 5.6(win32/win64) Maven (可使用Intellij ...
- hbase单机安装和简单使用
电脑太卡了,使用不了hadoop和hdfs了,所以今天安装了一个伪分布式,数据存储在本地磁盘,也没有向HDFS中存,也没有使用自己的zookeeper,安装过程中还出了点小问题,总结一下,免得忘了. ...