emmm,,,最近在为项目的第二阶段铺路,偶然看到directive,想想看因为项目已经高度集成了第三方组件,所以对于自定义指令方面的经验自己实在知之甚少,后面经过阅读相关资料,总结一篇关于在自定义指令中使用@HostBingDing() 和@HostListenner()。

在使用这两个属性之前,必须明白一件事,就是在angular中有三种directive:

如图所示,component与其他两个directive的一个很明显的区别就是component有template

宿主(host)

下面提到的一个宿主术语,在angular中宿主可以是component也可以是element

@HostBinding() 装饰器

设置宿主的属性,比如样式: height,width,color,margin, border等等

用法: @HostBingding()接受一个参数,这个参数用于指定宿主的属性的名字

@HostBinding('class.active')

@HostBinding('disabled')

@HostBinding('attr.role')

@HostListener() 装饰器

处理宿主的事件,比如mouseover, mosuout, keydown等等

用法:@HostListener() 接受一个参数,该参数用于指定宿主的事件的名字

举个例子

使用命令行生成rainbow自定指令

ng g directive rainbow

这里定义个自定义指令 raibow,directive.ts

import {Directive, HostBinding, HostListener} from '@angular/core';

@Directive({
selector: '[appRainbow]'
})
export class RainbowDirective {
possibleColors = [
'darksalmon', 'hotpink', 'lightskyblue', 'goldenrod', 'peachpuff',
'mediumspringgreen', 'cornflowerblue', 'blanchedalmond', 'lightslategrey'
]; @HostBinding('style.color') color: string;
// @HostBinding('style.border-color') borderColor: string;
@HostBinding('style.border-bottom-color') borderBottomColor: string; @HostListener('keydown') newColor() {
const colorPick = Math.floor(Math.random() * this.possibleColors.length); this.color = this.borderBottomColor = this.possibleColors[colorPick];
}
}

在任意宿主中使用该指令

<input type="text" appRainbow>

最终效果:

不知道为虾米动态图片上传不了,大概就是每次输入键盘input的边框和文字的颜色会随机动态改变

Angular6在自定义指令中使用@HostBingDing() 和@HostListener()的更多相关文章

  1. Angularjs进阶笔记(2)-自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...

  2. Vue2自定义指令改变DOM值后未刷新data中绑定属性的值

    标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...

  3. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  4. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  5. 在vue中创建自定义指令

    原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...

  6. Vue中自定义指令的使用方法!

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...

  7. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  8. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  9. AngularJs自定义指令详解(6) - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

随机推荐

  1. LeetCode:二叉树的非递归中序遍历

    第一次动手写二叉树的,有点小激动,64行的if花了点时间,上传leetcode一次点亮~~~ /* inorder traversal binary tree */ #include <stdi ...

  2. LeetCode求能够装得最多的水

    费了半天劲还是没想出来,然后跑到网上找答案,明白了是怎么回事儿了,就是不知道为啥自己没有想出来. 明天再搞~~~ 国庆快乐~~~ 一年了~~~~~ 明年今日~~我会在哪儿 =====2017.9.30 ...

  3. jquery+easyui主界面布局一例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx ...

  4. hdu 1413 文件系统

    hdu   1413   文件系统         题目链接:pid=1413" target="_blank">http://acm.hdu.edu.cn/sho ...

  5. 阿里妈妈-RAP项目的实践(2)

    接口详情 (id: 32872) Mock数据 接口名称 datalist1 请求类型 get 请求Url /datas/list1 接口描述 数据列表 请求参数列表 变量名 含义 类型 备注 响应参 ...

  6. Raspberry Pi3 ~ C语言控制串口

    注明出处:http://www.cnblogs.com/einstein-2014731/p/5551846.html 使用C语言控制树莓派3B的串口,实现使用串口收发数据的目的.之前以为这个串口是被 ...

  7. 数组/字符串/ Math / 方法示例

    数组 Array concat  数组的合并 <script> var north = ["北京","上海","深圳"]; va ...

  8. Xcode工程断点调试失效

    1.我解决的是方法是,选择Product---->Edit Scheme------>(这里进入后会有Info,Arguments,Options,Diagnostics)选择Info-- ...

  9. vue组件挂载到全局方法

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像eleme ...

  10. android4.3 蓝牙BLE编程

    一.蓝牙4.0简介 蓝牙4.0标准包含两个蓝牙标准,准确的说,是一个双模的标准,它包含传统蓝牙部分(也有称之为经典蓝牙Classic Bluetooth)和低功耗蓝牙部分(Bluetooth Low ...