angular-cli : 마우스 휠 지시문

Question

내 프로젝트에 mouseWheel이라는 지시어가 있습니다. here인데, 작동시키지 못합니다.

mouseWheelUp 및 mouseWheelDown 지시문을 보류하려고하므로 스크롤 위/아래에서 발생하는 동작을 제어 할 수 있습니다.

이 나는 ​​수입 선언 내 SharedModule에 수출하고 있고, 나는 나의 SharedModule 내 주요 헤더의 모듈

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'); 
    } 
} 

에 그리고 내 템플릿에 수입이 내가 가진 :

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

I 아래로 스크롤하면 아무 것도 콘솔에 표시되지 않습니다. 속도를 높이려면 어떻게해야합니까?

Answer 1

귀하의 요소가 지침의 선택자와 일치하지 않습니다. HTML 태그의 어느 곳에서나 mouseWheel을 추가하십시오.

예 :

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

Answer 2

것은 당신이 아니라 선택 정의된다 : 당신의 장식에서 헤더 주를, 그러나 당신의 HTML에 당신은 클래스로 참조한다. Header-Main은 사용자 정의 태그 여야하며, 클래스 또는 다른 속성으로 사용하려면 메타 데이터에서 선택자로 정의하십시오. '[header-main]'