Angular 2應用程序中的自定義指令無法按預期使用懸停事件

在我的Angular 2應用程序中，我設置了自定義指令來顯示和隱藏基於用戶懸停在相關元素上的刪除圖標。我非常肯定，我已經按照建議設置了一切，但是當我將鼠標懸停在元素上時沒有任何反應。這讓我懷疑問題是指令是否設置不正確，或者如果組件可能沒有意識到它（即 - 我沒有正確導入它以用於組件）。順便說一句，我針對的是.field-delete-btn css類，它應用於我試圖在用戶懸停之前隱藏的刪除圖標。Angular 2應用程序中的自定義指令無法按預期使用懸停事件

這是指令本身：

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

@Directive({ 
    selector: "[cloakIt]" 
}) 
export class ElementDisplayDirective { 
    constructor(private el: ElementRef, 
       private renderer: Renderer) { 

    } 

    @HostListener ('mouseover') onMouseOver() { 
    let deleteIcon = this.el.nativeElement.querySelector('.field-delete-btn'); 
    this.renderer.setElementStyle(deleteIcon, 'display', 'inline'); 
    console.log('User moused over...'); 
    } 

    @HostListener('mouseout') onMouseOut() { 
    let deleteIcon = this.el.nativeElement.querySelector('.field-delete-btn'); 
    this.renderer.setElementStyle(deleteIcon, 'display', 'none'); 
    console.log('User moused out...'); 
    } 
}

而且，從我的理解，我只列出了選擇纏繞元件我想要的目標，所以，因爲我的指令選擇是「cloakIt」，我對在組件視圖中使用它是這樣的（因爲我不知道是否將「cloakIt」關於股利或跨度，我把它放在兩個用於測試目的）：

<div *ngFor="let permission of client?.permissions; let i = index;" class="permission" cloakIt> 
    <span class="capitalize" cloakIt>{{permission.department}} 
      <i [style.display]="'none'" (click)="removePermission(i)" class="material-icons md-18 field-delete-btn" title="Delete a role">delete</i> 
    </span> 
</div>

在最低限度我的控制檯懸停在元素上時應該觸發.log，但沒有任何反應。我沒有得到任何錯誤，只是認識到發生懸停事件。順便說一句，我已經在我的根app.module中列出了這個指令 - 據我所知，這意味着它現在應該可以在任何地方使用。然而，爲了額外的措施，雖然我認爲它不是必要的，但我也在我使用它的組件中導入了該指令。

那麼這裏有什麼問題？語法或者我設置自定義指令的方式是否有問題，或者是其他問題？

編輯

這裏是一個Plunkr一個鏈接，我遵循的基本結構在我的自定義指令。

來源

2017-08-09 Muirik

的作品，你能不能給與代碼plnkr代碼中的plunker？ –

我以前沒有設置過plunkr，但這裏有一個我遵循的結構示例：http://plnkr.co/edit/EgsmbXMN7s7YYDYIu9N8?p=preview – Muirik

我沒有在這裏發現任何錯誤，有你確定你的HTML元素是「hoverable」，意思是不在任何其他元素的後面或沒有高度或寬度等？ –

不要忘記在本地模塊中添加ElementDisplayDirective@Declarations。

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [ 
    AppComponent, 
    ..., 
    ElementDisplayDirective 
    ], 
    bootstrap: [AppComponent] 
})

爲您提供了良好https://embed.plnkr.co/f3W8kzhRdl2aQs3F2FxD

來源

2017-08-09 06:40:33 Fetrarij

Angular 2應用程序中的自定義指令無法按預期使用懸停事件

回答

相關問題