Angular 4: rolagem infinita não funciona
Eu tentei usar ngx-infinite-scroll (https://www.npmjs.com/package/angular2-infinite-scroll) e também algumas outras diretivas, mas nenhuma 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
A importação está concluída
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');
}
}
Tentei usar o ouvinte de host também, mas o evento de rolagem simplesmente não parece ocorrer. Tem alguma coisa a ver com a classe que estou usando na qual o pergaminho infinito é aplicado?