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 sxyunless

sxyunless.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>

会导致以下错误

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏macOS 开发学习

Mac开发之NSCollectionView使用以及自定义item

与iOS中的UICollectionView相似,在Mac开发中,我们也会常常用到NSCollectionView来展示内容,但在使用中,与iOS有较大差别,尤...

24920
来自专栏iKcamp

如何在原生微信小程序中实现数据双向绑定

官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑...

43550
来自专栏性能与架构

HTML5 性能监控API - 计时

计时API可以测量两个预定义标记之间的性能,仅需要分别定义测量的开始和结束标记 例如 var start = performance.now(); ... ...

33450
来自专栏Python疯子

Selenium和PhantomJS 终极最全使用总结

1. 加载页面[image.png]PhantomJS 截取的是网页的完整页面,包括下拉进度条的内容

1.1K30
来自专栏Core Net

Visual Studio 2017 for Mac 快捷键

35240
来自专栏柠檬先生

Sass 基础(八)

@import       Sass 支持所有css 的@规则,以及一些Sass 专属的规则,也被称为“指令(directive)”.这些规则在Sass 中具...

21390
来自专栏奔跑的蛙牛技术博客

Angular路由

1. reload方法用于刷新当前文档,不从缓存中读取,走一遍服务器。使用reload页面内的表单可能会重新提交

27050
来自专栏Hongten

python开发_IDEL(Python GUI)的使用方法

在这篇blog"Python开发_python的安装"里面你会了解到python的安装。

12820
来自专栏网络

玩转 React 服务器端渲染

【编者按】React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说 React 提供了两个方法renderToStri...

27780
来自专栏磨磨谈

Luminous监控界面中文语言包

之前有各种ceph的管理平台,在部署方面大部分都比较麻烦,现在在luminous版本当中有一个原生的dashboard,虽然目前这个只能看,但是从界面上面,从接...

19720

扫码关注云+社区

领取腾讯云代金券