angular-cli: Mausrad Direktive

Question

Ich habe eine mouseWheel Direktive für mein Projekt, das ich here gefunden habe, aber ich kann es nicht zur Arbeit bekommen.

Ich versuche, diese mouseWheelUp und mouseWheelDown Direktiven zu bekommen, so dass ich steuern kann, was beim Scrollen nach oben/unten passiert.

Ich habe es importiert, erklärt und in meinem SharedModule exportiert, und ich habe meine SharedModule in meinem Haupt-Header-Modul importiert

import { Component, ElementRef, ViewChild, Renderer, AfterViewInit, Input } from '@angular/core'; 

import { LayoutService } from 'app/core/services/layout.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'header-main', 
    templateUrl: 'header-main.component.html' 
}) 

export class HeaderMainComponent { 

    constructor(private layoutService: LayoutService, private renderer: Renderer) { } 

    scrollUp() { 
     console.log('Mouse wheel scrolled up'); 
    } 

    scrollDown() { 
     console.log('Mouse wheel scrolled down'); 
    } 
} 

Und in meiner Vorlage habe ich:

<header class="header-main" (mouseWheelUp)="scrollUp()" (mouseWheelDown)="scrollDown()"> 

Als ich Scrollen Sie nach unten, nichts wird in der Konsole angezeigt. Was soll ich tun, um das zu beschleunigen?

Answer 1

Ihr Element stimmt nicht mit dem Selektor der Direktive überein. Fügen Sie mouseWheel überall im HTML-Tag hinzu.

Beispiel:

<header mouseWheel class="header-main" (mouseWheelUp)="scrollUp()" (mouseWheelDown)="scrollDown()"> 

Answer 2

Sie definieren Selektor als: Kopfhaupt in Ihrem Dekorateur, aber in Ihrem HTML Sie es als eine Klasse beziehen. Header-main sollte Ihr benutzerdefiniertes Tag sein, oder wenn Sie es als Klasse oder ein anderes Attribut verwenden wollen, dann definieren Sie es in Metadaten als Selektor: '[header-main]'