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');
}
}
ホストリスナーも使用してみましたが、スクロールイベントは発生しないようです。私が使用しているクラスで、無限スクロールが適用されるものと何か関係がありますか?
document の内部で言及されています。
デフォルトでは、ディレクティブはウィンドウスクロールイベントをリッスンし、コールバックを呼び出しました。実際の要素がスクロールされたときにコールバックをトリガーするには、これらの設定を構成する必要があります。
- [scrollWindow] = "false"
- 要素に明示的な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!!')
}
}
<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 {height:100%overflow-y:scroll; }
上記のHTMLコードを使用すると正常に動作します-- ngx-infinite-scroll
コンテナ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>