web-dev-qa-db-ja.com

onScrollイベントは、Angular4の機能をトリガーします

私は、ページ分割されたリストを表示しようとしています。したがって、ユーザーが下にスクロールすると、より多くのアイテムをロードする機能をトリガーしたいのです。しかし、「スクロール」イベントで関数を呼び出すことはできません。

これが私の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 );
    }

この問題で私を助けてもらえますか？ありがとうございました！ :)

htmlangulartypescriptevent-handlingonscroll
7
Emanuela Colta

@HostListnerを使用しているときに別の関数名を指定しました。コードを次のように変更します

@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>

プランクを確認してください こちら 。

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

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

これは、divがスクロールされる場合にのみトリガーされます。プランクを見つける here

11
Vikhyath Maiya