angular5中的自定义指令（属性指令）

属性型指令用于改变一个 DOM 元素的外观或行为。

在 Angular 中有三种类型的指令：

1. 组件 — 拥有模板的指令

2. 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令

3. 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。

在cmd的命令窗口里面执行命令：ng generate directive highlight

生成的 

src/app/highlight.directive.ts

 文件如下：

import { Directive } from '@angular/core';

@Directive({ selector: '[appHighlight]' })

export class HighlightDirective {

constructor() { }
}

 

import

 语句还从 Angular 的 

core

 库中导入了一个 

ElementRef

 符号。

你可以在指令的构造函数中注入 

ElementRef

，来引用宿主 DOM 元素，

ElementRef

 通过其 

nativeElement

 属性给你了直接访问宿主 DOM 元素的能力。

 

使用方法：

<p appHighlight>Highlight me!</p>

总结：Angular 在宿主元素 

<p>

 上发现了一个 

appHighlight

 属性。 然后它创建了一个 

HighlightDirective

 类的实例，并把所在元素的引用注入到了指令的构造函数中。 在构造函数中，该指令把 

<p>

 元素的背景设置为了黄色。 

响应用户引发的事件

先把 

HostListener

 加进导入列表中。

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

然后使用 

HostListener

 装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。

@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}

private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}

 

src/app/highlight.directive.ts

 文件如下：

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }

@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}

private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}

　Ps：这个demo的小例子是按照官网来的，是一个很经典的教程，为了偷懒，所以直接复制过来了。希望老司机们不要喷。谢谢

但是这样写的话太死板了，不够灵活。。。比如说：我想鼠标经过不同的div元素的时候，实现不同的背景颜色，那这个时候就要用到数据绑定向指令传值了(@Input);

直接把最终的代码贴上来吧（运行下面的代码可以试试）

 

src/app/highlight.directive.ts

 文件如下：

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

@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {

constructor(private el: ElementRef) {
}

@Input() appHighlight: string;

@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.appHighlight || 'red');
}

@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}

private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}

使用的方法是：

<div>
<input type="radio" name="colors" (click)="color='lightgreen'">Green
<input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>

转载于:https://www.cnblogs.com/0955xf/p/9268260.html

• 点赞
• 收藏
• 分享
• 文章举报

diaobei9747 发布了0 篇原创文章 · 获赞 0 · 访问量 441 私信 关注