Angular自定义指令

一依不舍
1,589 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

自定义指令

在ng6中，指令共分三类

第一类指令：就是组件（组件也是指令）

第二类指令：属性型指令，如：ngStyle，ngClass等

用来控制元素的属性行为的。

ngClass跟vue中绑定类语法一样

属性值

可以是数组

可以是对象

可以是字符串

第三类指令：结构型指令，如：ngIf, ngSwitchCase, ngSwitchDefault, ngFor

用来控制元素的创建的（也是模板指令）

属性型指令与结构型指令区别

1 属性型指令控制元素的属性行为，不负责元素的创建，而结构型指令则控制元素的创建

2 指令的属性值默认都是字符串，想变成js环境都要使用语法糖

属性型指令语法糖： []

结构型指令语法糖： 普通元素上使用 * , 模板元素上使用[]

创建指令

内置的指令是有限的，想实现更多的功能，我们要自定义指令，ng6也为我们提供了创建指令的工具

通过 ng g directive 指令名称

会自动创建指令脚本文件和指令单测文件，

并且修改app.module全局模块文件，在全局声明了，因此在模块内部的所有组件中，都可以直接使用该指令。

指令与组件

指令与组件的区别

1 文件

组件有四类文件：样式，模板，脚本，单测

组件只有两类文件：脚本，单测

2 选择器

组件是自定义元素名称选择器

指令是自定义属性名称选择器

3 OnInit接口

组件实现了OnInit接口

指令没有实现OnInit接口

4 注解

组件的组件类是Component

指令的注解类是Directive

组件也属于指令，组件之间可以通信，组件与指令之间也可以通信

指令向组件通信

由于指令在组件中使用，所以指令向组件的通信可以看成是子组件向父组件通信

分成六步

第一步 绑定自定义事件

第二步 指令中，引入吞吐器Output

第三步 指令中，引入EventEmitter

第四步 注册事件对象，有两种方式

1 吞吐器：  @Output() demo = new EventEmitter()

2 元信息： 注解中outputs: [] 组件中 deom = new EventEmitter()

第五步 指令发布消息，通过emit方法

第六步 父组件接收数据，并使用数据

举例：

import { Directive, Output, EventEmitter } from '@angular/core';
@Directive({
    selector: '[appDemo]',
    // 元信息
    outputs: ['sendMessage']
})
export class DemoDirective {
    // 4 注册消息
    // @Output() sendMessage = new EventEmitter();
    // 初始化
    sendMessage = new EventEmitter();
    constructor() {
        // console.log('success')
        // 2秒钟之后发送
        setTimeout(() => {
            // 5 发布消息
            this.sendMessage.emit({
                color: 'pink',
                msg: '菜鸟学习'
            })
        }, 2000)
    }
}

组件向指令通信

同样的道理，组件向指令通信，我们也可以看成是父组件向子组件通信，

共分六步

第一步 传递属性数据（如果是变化的，要使用[]语法糖）

第二步 定义模型类

第三步 指令中，引入模型类型

第四步 指令中，引入吞吐器Input

第五步 注册数据

1 吞吐器： @Input() demo:Data;

2 元信息： 注解中inputs: [], 组件中 demo:Data;

第六步 指令中使用数据

avatar
文章
阅读
粉丝