角4 /材質2：スクロールイベントが発射されない

Angular 4アプリでウィンドウがスクロールされたときを検出しようとしていますが、イベントを直接<body>に添付するとイベントが発生しないようです要素、または私のコンポーネントでは、これらの線に沿って何かを使用して：角4 /材質2：スクロールイベントが発射されない

this.eventSubscription = Observable.fromEvent(winRef.nativeWindow, "scroll").subscribe(e => { 
    // do something 
});

すべてのウェブ上の記事のすべての種類がありますが、決定的な答えがあるように表示されません。 1つの投稿は、コンポーネントが<router-outlet>の範囲内にある場合、カプセル化を親要素のNativeに設定する必要があることを示しています。私はこれを試しました：うまくいきませんでした。

マイコンポーネントテンプレートは次のようになります。

<!-- home.component.html --> 
<div> 
    <p *ngFor="let item of playlistItems$ | async"> 
     {{ item | json }} 
    </p> 
</div>

コンポーネント自体：

// home.component.ts 
@Component({ 
    selector: 'beyond-home', 
    templateUrl: './home.component.html', 
    styleUrls: [ './home.component.scss' ] 
}) 
export class HomeComponent { 

    playlistItems$: Observable<Array<IPlaylistItem>>; 
    eventSubscription; 

    constructor(private store: Store<fromRoot.IState>, private winRef: WindowRef) { 
     this.store.dispatch(playlist.loadPlaylist()); 
     this.playlistItems$ = this.store.select(fromRoot.getPlaylistItems); 

     this.eventSubscription = Observable.fromEvent(winRef.nativeWindow, "scroll").subscribe(e => { 
      // do something 
     }); 
    } 
}

は私の人生のために何が起こっているのかうまくできません。イベントだけが発砲していません！私は材料2を使用していますが、これは合併症に加わる可能性があります。正しいイベントを購読していますか？それは本当にwindow:scrollですか？私は棒の間違った終わりを持っていますか？

出典

2017-11-01 serlingpa

私はあなたが必要とするすべてはあなたのコードで考える：

@HostListener('window:scroll', ['$event']) 
    onScroll(event) { 
    console.log('You scrolled!'); 
    }

私のためのコンポーネント作品にこれを追加します。本体に追加すると、アプリの一部ではないため、機能しないことがあります。私も材料を使用しており、上記のコードでは副作用がありませんでした。

はここplunkrをチェックアウト：

https://plnkr.co/edit/no6czB

をあなたは結果を見てコースのコンソールを表示する必要があります。

出典

2017-11-01 16:22:59 PeterS

私が最初に試したことです。それはうまくいかなかった。 – serlingpa

@serlingpaしかし、どこで試しましたか？あなたが体にそれを添付しようとすると、それは角度アプリの一部ではないので動作しない可能性があります。 app.componentなどのコンポーネントに接続して試してみてください。何も表示されない場合、別のコードでは、すべてのスクロールイベントが破砕されます。 – PeterS

テーブルエントリを非同期にロードしようとすると、同じ問題が発生しました。最後に、スクロールイベントをキャプチャするためのディレクティブの使用は完全に機能し、再利用も可能です。私は<本体でこれを使用していませんでしたが、<div>にすべてをラップしてそこに指示を適用すると、私はそれを推測しています。これは私の指示です：

import { Directive, HostListener, Output, EventEmitter } from 

'@angular/core'; 

@Directive({ 
    selector: '[rzScrollTracker]' 
}) 
export class ScrollTrackerDirective { 
    @Output() updateLoad: EventEmitter<any> = new EventEmitter(); 

    previousValue = 0; 
    scrollDir: string = undefined; 

    @HostListener('scroll', ['$event']) 
    onScroll(event) { 
    const tracker = event.target; 
    if(tracker.scrollTop > this.previousValue) { 
     this.scrollDir = 'down'; 
    } else { 
     this.scrollDir = 'up'; 
    } 
    // console.log('scrollDir:', this.scrollDir); 

    let limit = tracker.scrollHeight - tracker.clientHeight; 
    // console.log(event.target.scrollTop, limit); 
    if (event.target.scrollTop === limit) { 
     // console.log('end reached'); 
     this.updateLoad.emit(true); 
    } 
    else if (event.target.scrollTop <= Math.floor(limit/8) && this.scrollDir === 'up') { 
     // console.log('scrolled to top'); 
     this.updateLoad.emit(false); 
    } 
    this.previousValue = tracker.scrollTop; 
    } 

    constructor() { } 

}

私はスクロールの方向を追跡していますが、それは必要ありません。このディレクティブは、他の要素/コンポーネントで使用できます。

<tbody rzScrollTracker (updateLoad)="updateLoadFactor(nestedFilter, $event)" 
     <tr *ngFor="let row of filteredResultsInView[nestedFilter]['values']; let j = index"> 
     <div class="checkbox"> 
      <input type="checkbox" 
      [value]="row.toString()" 
      [disabled]="!areEnabledFromView[nestedFilter]" 
      id="checkrads_{{nestedFilter}}_{{i}}_{{j}}" 
      [checked]="selectedResultsObj[nestedFilter][row.toString()]" 
      #cbox 
      (click)="selectClickedElement(nestedFilter, cbox)"> 
      <label for="checkrads_{{nestedFilter}}_{{i}}_{{j}}">{{ row.toString() }}</label> 
     </div>  
     </tr> 
     <tr> &nbsp;</tr> 
     <tr *ngIf="resultsInProgress[nestedFilter]"> 
     Fetching results... 
     </tr> 
    </tbody>

ディレクティブにより放出された「updateLoad」イベントがコンポーネントに捕捉され、機能が表示されているデータを修正するために呼び出されます：私は、TBODY要素とdivの上で正常にそれを使用しています。
私はこれが助けてくれることを願っています！

出典

2017-11-02 12:59:56 MrfksIV

角4 /材質2：スクロールイベントが発射されない

答えて

関連する問題