angular4 指令

Posted on

angular 4 中指令分为以下三种

  • 组件(Component directive): 用于构建UI组件，集成Directive类
    例如: ngStyle 、ngClass

  • 属性指令(Attrbute directive): 用于改变组件的外观或者行为
    例如: ngIf、 ngFor、ngSwitch

  • 结构指令(Structural directive): 用于动态添加删除DOM元素来改变DOM布局

自定义属性指令实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import {Directive, Input, ElementRef, Renderer, HostListener} from '@angular/core';

@Directive({
    seletor: '[exeBackground]'
})
export class exeBackground {
    private _defaultColor = 'red';

    @Input('exeBackground')
    backgroundColor: string; // 输入属性，用于设置元素的背景颜色

    construtor(private elementRef: ElementRef,
        private renderer: Renderer
    ) {
        this.setStyle(this._defaultColor);
    }

    HostListener('click')
    onClick() {
    // 监听宿主的点击事件，设置元素的背景
    this.setStyle(this.backgroundColor || this._defaultColor);
    }

    private setStyle(style: string) {
        // 调用rendener对象提供的API设置元素的背景颜色
        this.rendener.setElementStyle(this.element.nativeElement,
            'backgroundColor', color
        );
    }
}

自定义结构型指令实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { ... } from "@angular/core";

@directive({
    selector: '[exeUnClass]'
})
export class UnClassDirective {
    @Input('exeUnClass')
    set condition(newCondition: boolean) {
        if (!newCondition) {
            this.viewContainer.createEmbeddedView(this.templateRef)
        } else {
            this.viewContainer.clear();
        }
    }

    constructor(private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) {
        // code...
    }
}

0%