angular5 自定義指令 輸入輸出 @Input @Output(右鍵點擊事件傳遞)

   指令寫法，angular5官網文檔給的很詳細。

 

 首先要創建一個文件，需注意命名規范（后綴名為xxx.directive.ts）；

 今天要記錄的是在多個li中，右鍵點擊之后顯示出對應的菜單，直接上圖吧！

右鍵點擊在js中只需要這樣寫就行：

document.oncontextmenu = function(e){

  e.preventDefault();

};

但是在angular中，需要單獨定義指令，用@Input進行數據綁定，傳遞給父元素值，再用@Output將此事件發射出去，讓父元素能夠接收到；

 

指令文件：

 import {Directive, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";

@Directive({  
  selector: '[cp-right-click]', //選擇你
})

export class CPRightClickDirective implements OnInit{
 @Input('cp-right-click') rightClick: number;//Input將數據從綁定表達式傳達到指令中。
 @Output() rightClickEvent: EventEmitter<any> = new EventEmitter();
 constructor(public el: ElementRef){} //ElementRef注入到指令構造函數中。這樣代碼就可以訪問 DOM 元素了。
 ngOnInit(){
 let self = this;
 this.el.nativeElement.addEventListener('contextmenu', function (event) {
 event.preventDefault();//阻止默認行為 
 self.rightClickEvent.emit(self.rightClick);//發射事件
 })
 }
}

父元素html文件：

<div nz-col [nzSpan]="3" *ngFor="let list of healList; let i = index" style="position: relative;">
  <dl class="add-project-dl" >
    <dt [cp-right-click]="i" (rightClickEvent)='rightClickHandler($event)' (mouseout)="hideCon(i)">
      <img src="{{list.logopath}}"/>
      <div class="play-group"
           [style.display]="list.visible ? 'block' : 'none'"
           (mousemove)="groupShow(i)"
           (mouseout)="groupHide(i)">
        <p (click)="editPlaFrom(list)">編輯</p>
 <p (click)="delPlaFrom(list)">刪除</p>
 </div>
 </dt>
 <dd>{{list.name}}</dd>
</dl>
</div>
現在父元素接收到了子元素指令發射的事件，並綁定了rightClickHandler（$event）事件，這時可以在父元素中定義事件，控制右鍵菜單的顯示與隱藏；
注：定時器是為了控制鼠標划入划出時，菜單是否顯示隱藏，相當於加了一層鎖，滑到別處時，那么菜單操作就會被隱藏，同時又保證了流暢性；

this.healList = [];//循環肯定要有數組 此數組是動態渲染的 html中的 ‘let i = index’ 是為了獲取點擊元素的index
for(let i in data){
 this.healList.push({
 name: data[i].name,
 linkpath: data[i].linkpath,
 logopath: data[i].logopath,
 id: data[i].id,
 isdeleted: data[i].isdeleted,
 visible: false
 })
}
父文件中的事件：
rightClickHandler(clickIndex){
 let self = this;
 this.clearLockedTimeOut();
 this. detailShowLock = setTimeout(function () {
 self.healList.forEach(list => {
 list.visible = false;
 });
 self.healList[clickIndex].visible = true;
 }, 250);
}
//以下是划入划出控制事件

clearLockedTimeOut() {
  let self = this;
 if (this.detailShowLock) {
 clearTimeout(self.detailShowLock);
 }
 if (this.detailCloseLock) {
 clearTimeout(self.detailCloseLock);
 }
}

hideCon(clickIndex){
  let self = this;
 this.clearLockedTimeOut();
 this.detailCloseLock = setTimeout(function () {
 self.healList[clickIndex].visible = false;
 }, 250);
}
groupShow(clickIndex){
 this.clearLockedTimeOut();
 this.healList[clickIndex].visible = true;
}
groupHide(clickIndex){
 let self = this;
 this.clearLockedTimeOut();
 this.detailCloseLock = setTimeout(function () {
 self.healList[clickIndex].visible = false;
 }, 250);
}

每天記錄一點點 開心