Angular 4: бесконечная прокрутка не работает

Я пробовал использовать ngx-infinite-scroll (https://www.npmjs.com/package/angular2-infinite-scroll), а также некоторые другие директивы, но, похоже, ни одна из них не работает.

package.json

"dependencies": {
"@angular/animations": "^4.0.2",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.2",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/platform-server": "^4.0.2",
"@angular/router": "^4.0.0",
"absurd": "^0.3.8",
"angular2-masonry": "^0.4.0",
"animate.css": "^3.5.2",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"jquery-slimscroll": "^1.3.8",
"metismenu": "^2.7.0",
"ng2-bs3-modal": "^0.10.4",
"ngx-infinite-scroll": "^0.5.1",
"rxjs": "^5.1.0"
}

user.component.html

<div class="row" infiniteScroll [infiniteScrollDistance]="0" 
  [infiniteScrollThrottle]="300" (scrolled)="loadMore()">
   <div class="col-md-3 col-sm-4" *ngFor="let user of userList">
     <span>{{user.name}} ({{user.email}})</span>
   </div>
</div>

user.module.ts

Импорт сделан

import { InfiniteScrollModule } from 'ngx-infinite-scroll';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    InfiniteScrollModule
  ],
  declarations: [UserComponent],
  providers: [],
  exports: [],
})
export class UserModule { }

user.component.ts

export class UserComponent {

  constructor() {}

  loadMore() {
    console.log('method begins');
  }
}

Пытался использовать прослушиватель хоста, но событие прокрутки, похоже, не происходит. Имеет ли это какое-либо отношение к классу, который я использую, к которому применена бесконечная прокрутка?


angular infinite-scroll nginfinitescroll
person Sanchit Tandon    schedule 11.05.2017    source источник
comment
Посмотрите пример бесконечной виртуальной прокрутки материала Angular 7 здесь freakyjolly.com/   -  person Code Spy    schedule 24.10.2018

Ответы (3)


arrow_upward
24
arrow_downward

В документе упоминается о.

По умолчанию директива прослушивает событие прокрутки окна и вызывает обратный вызов. Чтобы вызвать обратный вызов при прокрутке фактического элемента, необходимо настроить следующие параметры:

  1. [scrollWindow] = "ложь"
  2. установить явное значение "высоты" css для элемента

Поэтому просто установите высоту: 100% на свой контейнер, и вы увидите, как прокручивается.

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    styles: [
        `.search-results {
            height: 20rem;
            overflow: scroll;
        }`
    ],
    template: `
        <div class="search-results"
            infiniteScroll
            [infiniteScrollDistance]="2"
            [infiniteScrollThrottle]="500"
            (scrolled)="onScroll()"
            [scrollWindow]="false">
        </div>
    `
})
export class AppComponent {
    onScroll () {
        console.log('scrolled!!')
    }
}
person trungk18    schedule 04.07.2017
comment
Вау, спасибо за подсказку scrollWindow! Это заняло у меня часы! :) - person dave0688; 22.12.2017

arrow_upward
2
arrow_downward 

       <div
         [infiniteScrollDistance]="2"
         [infiniteScrollUpDistance]="1.5"
         [infiniteScrollThrottle]="100"
         (scrolled)="onScrollDown()"
         [scrollWindow]="false"class="search-results">
       <div  *ngFor="let user of userList">
        <span>{{user.name}} ({{user.email}})</span>
       </div>
       </div>

.search-results {высота: 100% переполнение-y: прокрутка; }

используйте приведенный выше HTML-код, он отлично работает - ngx-infinite-scroll

person Rajesh Pandhare    schedule 04.10.2017

arrow_upward
0
arrow_downward

Вы должны установить высоту своего контейнера div

<div class="row" style="height: 90%"
  infiniteScroll [infiniteScrollDistance]="0" 
  [infiniteScrollThrottle]="300" (scrolled)="loadMore()">
   <div class="col-md-3 col-sm-4" *ngFor="let user of userList">
     <span>{{user.name}} ({{user.email}})</span>
   </div>
</div>
person Dragan M.    schedule 07.06.2017