Angular如何自定义指令

[deepthan]

自定义指令

做一个点击图片放大至全屏，再点击缩小的效果。

其实就是给这个元素动态添加和移除calss。

html

<div imageEnlarged class='image-default'>
    <div class='img-wrap'>
        <img src='../../../../assets/images/demo.jpg' alt='demo图片'>
    </div>
</div>

css

``` .image-default { position: relative; width: 500px; margin: 2.4em 1em; img{ width: 100%; } transition: all .3s ease-out; } .image-enlarged{ height: 100%; width: 100%; background:#222222; position: fixed; z-index: 99999; left: 0px; top: 0px; display: table; overflow: hidden; transition: all .3s ease-in; .img-wrap{ width: 100%; height: 100%; text-align: center; display: table-cell; vertical-align: middle; } img{ max-height: 80%; max-width: 80%; } } ```

法1： host里操作class

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

@Directive({
    selector: '[imageEnlarged]',
    host : {
        '[class.image-enlarged]' : 'toggle',
        '[class.image-default]' : '!toggle',
        '(click)' : 'clickImg()'
    }
})

export class ImageDirective {
    toggle: boolean = false;
    clickImg(){
      this.toggle = !this.toggle;
    }
}

法2： 操作dom元素

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

@Directive({
  selector: '[imageEnlarged]',
  host : {
    '(click)' : 'clickImg()'
    }
})
export class ImageDirective {
    toggle : boolean = false;
    classArr = ['image-enlarged', "image-default"];

    constructor(private el: ElementRef, private renderer: Renderer2) {}

    clickImg(){
        this.toggle = !this.toggle;
        this.toggle 
            ? this.toggleClass(this.classArr[0], this.classArr[1])
            : this.toggleClass(this.classArr[1], this.classArr[0])
        }
    }

    toggleClass(increase, decrease){
        this.renderer.addClass(this.el.nativeElement, increase);
        this.renderer.removeClass(this.el.nativeElement, decrease);
    }   
}

自定义指令如何传递参数

html

<div myDirective [disabled]="true"></div>

directive

@Directive({
  selector: '[myDirective]',
})
export class BtnToggleStatusDirective {
  @Input() disabled: boolean;
}