web-dev-qa-db-fra.com

Angular 4: Le défilement infini ne fonctionne pas

J'ai essayé d'utiliser ngx-infinite-scroll ( https://www.npmjs.com/package/angular2-infinite-scroll ) et quelques autres directives, mais aucune ne semble fonctionner.

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

L'importation est faite

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

J'ai essayé d'utiliser le programme d'écoute hôte également, mais l'événement de défilement ne semble pas se produire ..___ Est-ce que cela a un lien avec la classe que j'utilise sur laquelle le défilement infini est appliqué?

angularinfinite-scrollnginfinitescroll
10
Sanchit Tandon

Dans le document a mentionné à propos de.

Par défaut, la directive écoute l'événement de défilement de la fenêtre et invoqué le rappel. Pour déclencher le rappel lorsque l’élément réel défile, ces paramètres doivent être configurés:

  1. [scrollWindow] = "false"
  2. définir une valeur CSS "height" explicite pour l'élément

Par conséquent, mettez simplement la hauteur: 100% sur votre conteneur et vous verrez le défilement tiré. 

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!!')
    }
}
14
trungk18
       <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>

.Résultats de la recherche{ hauteur: 100% débordement-y: faire défiler; }

utiliser le code HTML ci-dessus cela fonctionne très bien - ngx-infinite-scroll

1
Rajesh Pandhare

Vous devez définir la hauteur de votre conteneur 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>
0
Dragan M.