前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用

Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用

作者头像
贺贺V5
发布2018-08-21 12:12:19
1.4K0
发布2018-08-21 12:12:19
举报
文章被收录于专栏:贺贺的前端工程师之路

入手方式:

  • 需求 -- 先要弄清楚我们做什么?
  • 被使用方式 -- 长什么样子?什么场景被使用?怎么被使用?
  • 将每个特性写成单元测试,然后写代码,将这个单元的代码测试通过后,再进行下一个特性代码的单元测试。

绑定宿主元素的事件,事件绑定的时候捕捉到这个事件源$event(table指令,这是属性型指令的重点)。

Angular指令可分为三种

  • 组件
  • 属性型指令
  • 结构型指令

今天来学习一下属性型指令。 属性型指令把行为添加到<u>现有元素上。</u> 属性型指令用于改变一个 DOM 元素的外观或行为。

创建一个属性型指令 -- 初级应用

自己创建属性型指令的必要条件:

代码语言:javascript
复制
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer) {
       renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
    }
}
  • import语句指定了从 Angular 的core库导入的一些符号。
    • Directive提供@Directive装饰器功能。
    • ElementRef注入到指令构造函数中。 这样代码可以访问 DOM 元素。
    • Input将数据从绑定表达式传达到指令中。
    • Renderer让代码可以改变 DOM 元素的样式。
  • @Directive装饰器需要一个 CSS 选择器(属性名称加方括号-[attr]),以便从模板中识别出关联到这个指令的 HTML。 指令的选择器是[myHighlight],Angular 将会在模板中找到所有带myHighlight属性的元素。
  • **ElementRef是一个服务,它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。 **
  • Renderer服务允许通过代码设置元素的样式。
  • 别忘了把这个指令添加到 NgModule 元数据的declarations数组中。

响应用户引发的事件 -- 高级应用

需求 鼠标悬浮一个元素时,显示字的背景颜色。

  • 检测用户的鼠标何时进入和离开这个元素。
  • 通过设置和清除高亮色来响应这些操作。

实现 把@HostListener装饰应用到事件触发时需调用的方法。

代码语言:javascript
复制
/**
 * 参数1:DOM事件的名字
 * 参数2:注入的事件,常用的是$event
 */
@HostListener('click', ['$event']) onclick(event: MouseEvent) {}

@HostListener('mouseenter') onMouseEnter() {
/* . . . */
}

@HostListener('mouseleave') onMouseLeave() {
/* . . . */
}
  • @HostListener装饰器引用属性型指令的宿主元素,在这个例子中就是<p>。
  • 直接操纵 DOM 元素的方式给宿主 DOM 元素附加一个事件监听器。 <u>注意:正确的书写监听器,并且还要在指令被销毁的时候,必须卸掉监听器,不然会造成内存泄漏。</u>
  • 使用数据绑定向指令传递值,在定义这个属性的时候,我们调用了@Input()装饰器。
代码语言:javascript
复制
@Input('myHighlight') highlightColor: string;  // 属性 
<p [myHighlight]="color">Highlight me!</p> // 页面
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.12.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Angular指令可分为三种
  • 创建一个属性型指令 -- 初级应用
  • 响应用户引发的事件 -- 高级应用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档