Angular 4: el desplazamiento infinito no funciona
He intentado usar ngx-infinite-scroll (https://www.npmjs.com/package/angular2-infinite-scroll) y también algunas otras directivas, pero ninguna parece funcionar.
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
La importación está hecha
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');
}
}
Intenté usar host listener también, pero el evento de desplazamiento simplemente no parece ocurrir. ¿Tiene algo que ver con la clase que estoy usando en la que se aplica el desplazamiento infinito?