一：创建drag.directive.ts
代码如下:
import { Directive, ElementRef, Input,OnInit,Renderer,HostListener} from '@angular/core';
@Directive({ selector: '[myDrag]' })
//封装一个拖拽指令
export class HighlightDirective implements onInit {
constructor(private el: ElementRef,private rr:Renderer) {
}
//控制是否按下
//设置为private，放置外部改变内部数据
private isDown=false;
private disX ;
private disY ;
ngonInit(){
this.setColor(this.dragColor);
}
//点击事件
@HostListener('mousedown',['$event']) onMousedown(event) {
console.log(event);
this.isDown=true;
this.disX=event.clientX-this.el.nativeElement.offsetLeft;
this.disY=event.clientY-this.el.nativeElement.offsetTop;
}
//监听document移动事件事件
@HostListener('document:mousemove', ['$event']) onMousemove(event){
//判断该元素是否被点击了。
if(this.isDown){
console.log("移动中");
let newdisX=event.clientX;
let newdisY=event.clientY;
this.el.nativeElement.style.left=newdisX-this.disX+"px";
this.el.nativeElement.style.top=newdisY-this.disY+"px";
}
}
//监听document离开事件
@HostListener('document:mouseup',['$event']) onMouseup() {
//只用当元素移动过了，离开函数体才会触发。
if(this.isDown){
console.log("fail");
this.isDown=false;
}
}
private setColor(color){
this.el.nativeElement.style.background=color;
}
// 绑定到@Input属性
//绑定到@Input别名
//在指令内部，该属性叫dragColor，在外部，当我们绑定到它时，它叫myDrag。
@Input('myDrag') dragColor: string;
}
二:在根模块引入指令
例如:
//注册指令--->用法类似于组件
import {HighlightDirective} from '../directive/drag.directive';
//列出程序中的组件
declarations: [
AppComponent,
GeneralDetailComponent,
HighlightDirective
],
三:使用
