Ionic3 自定义指令
在 Angular 中有三种类型的指令
- 组件 — 拥有模板的指令
- 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
- 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
组件的概念比较大，本文讲解的是属性指令和结构指令的创建和使用，Angular官方文档
创建属性指令
创建一个指令可以直接使用ionic cli 工具
ionic g directive sxylight
//sxylight 是该属性指令的名称如果是首次执行该命令，会在 src 目录下生成一个 directives 目录，如同时在 directives 目录下生成 directives.module.ts 文件，该文件使用 @NgModule 注解，是一个模块，用于统一自定义的指令。同时生成的还有sxylight 指令，并且 ionic cli 会自动将指令的信息添加到 directives.module.ts 模块中。
大概是这样子的，只看标记的地方，多余的东西和本文无关
image.png
sxylight.ts 就是指令的具体实现，代码如下
import {Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
selector: '[sxylight]'
})
export class SxylightDirective {
constructor(private el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
@Input('sxylight') highlightColor: string;
@Input() defaultColor: string;
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || this.defaultColor || 'red');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}该指令的主要功能是：当鼠标悬浮到使用该指令的元素上时，元素的背景色发生变化。当鼠标离开时，清除背景色。
背景色的颜色可由父组件传入。
selector: '[sxylight]' 是该指令在外部使用时的名称
@Input 表示一个输入属性，表示可以从父组件传值进来
@HostListener 可用于监听事件
ElementRef 可以 替代dom API 获取元素 使用属性指令
使用自定义指令，有几个地方需要注意：首先需要子在 directives.module.ts 文件中 导入和导出， 然后需要在你使用的模块中导入。如果时使用 Ionic CLI工具创建的指令，directives.module.ts 已经自动配置好了，可以不用理会，需要的就是在别的模块中 引入 DirectivesModule(directives.module.ts )模块。比如，我需要在自己的 table模块中引用这个指令，那么只需要子啊 table.module.ts中引入这个模块即可，不需要在 app.module.ts中引入
导入工作做好之后，就可以直接在模板中使用该指令了
<p>自定义属性指令</p>
<h1 [sxylight]="'cyan'" defaultColor="violet">测试自定义属性指令</h1><br>效果如下 初始化的时候
鼠标悬浮之后
鼠标离开之后
创建结构指令
ionic g directive sxyunlesssxyunless.ts 代码如下
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[sxyunless]'
})
export class SxyunlessDirective {
private hasView = false;
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) {
}
@Input()
set sxyunless(condition: boolean) {
if (!condition && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
}这里定义了与 *ngIf 功能相反的指令，即：当条件不成立的时候才会生成对应的 DOM使用结构指令
因为在上面我们引进导入了 DirectivesModule ，而 DirectivesModule 又包含了现在新创建的这个结构指令，因此这里不需要在 table.module.ts 中导入模块了。
tables.html 关键代码
<p>自定义结构指令</p>
<h1 *sxyunless="false"> 测试自定义结构指令 </h1><br>测试结果如下
如果将 *sxyunless="false" 改成 *sxyunless="true"，即
<p>自定义结构指令</p>
<h1 *sxyunless="true"> 测试自定义结构指令 </h1><br>则测试效果如下，该dom没有加载
注意，结构指令在使用的时候必须加 * ，如果不加 * ，会出问题 例如将代码成如下
<p>自定义结构指令</p>
<h1 sxyunless="false"> 测试自定义结构指令 </h1><br>会导致以下错误
