問題

私はページ化されたリストを表示しようとしています。

これは私のHTMLドキュメントのようです:

    <div id="notifications-list"  (scroll)="scrollHandler($event)"  >
       <div class="row notification-row" *ngFor = "let notification of notifications" > 
                ...
       </div>
    </div>
 

私の.tsファイルには、次のものがあります:

       import { Component, OnInit, ViewChild, ViewEncapsulation, AfterViewChecked, ElementRef,  HostListener  } from '@angular/core';
        @Component({
            selector: 'header-component',
            templateUrl: 'header.component.html',
            styleUrls: ['header.component.css'],
            encapsulation: ViewEncapsulation.None,

        })

        export class HeaderComponent implements OnInit {
         constructor( ...){}


  scrollHandler(event){
    console.log(event);
    console.log('now you are scrolling');
  }
 

しかし、このようには動作しません。私のコンソールには何も表示されません。 私は@HostListenerを使用するなど、他の多くの方法で試しましたが、うまくいきませんでした:

 @HostListener('window:scroll', ['$event']) 
    dotheJob(event) {
      console.debug("Scroll Event", window.pageYOffset );
    }
 

この問題で私を助けてくれますか?ありがとうございました! :)

  ベストアンサー

@HostListner.Modify your code as as

 @HostListener('window:scroll', ['$event']) 
    scrollHandler(event) {
      console.debug("Scroll Event");
    }
 

テンプレート

 <div id="notifications-list"  (scroll)="scrollHandler($event)"  >
       <div class="row notification-row" *ngFor = "let notification of notifications" > 
                ...
       </div>
    </div>
 

plunk ここでをチェックしてください。それが役立つことを願っています。

上記のコードは、ページがスクロールされたときとdivがスクロールされたときの両方のスクロール機能をトリガーします。divスクロールイベントのみを必要とする場合は、次のコードを使用してください

 @HostListener('scroll', ['$event']) 
        scrollHandler(event) {
          console.debug("Scroll Event");
        }
 

これは、divがscrolled.Find the plunk here

  同じタグがついた質問を見る

htmlangulartypescriptevent-handlingonscroll