Angular 實現分段式加載，滾動刷新數據

如何在angular中實現數據的分段漸進式加載，滾動到頁面底部時刷新數據，在app端我們可以用ionic來實現下拉刷新，這里討論pc端的滾動刷新，我用到了primeNG，primeNG是一個專門為angular設計的UI組件庫（鏈接：https://www.primefaces.org/primeng/#/）。

以下具體討論實現的步驟：

1.在angular應用中安裝該組件

   npm install primeng --save    (在terminal中運行這個命令)

2.在應用的根模塊中導入要用到的primeng模塊

3.如果需要用到primeNG的css樣式也可以自己在angular-cli.json文件中配置

4.環境搭建好了，現在就可以開始寫代碼了，下面以我寫的demo為例：

  創建一個scroll-refresh文件

 

  html頁面：

<p-dataScroller [value]="activityLog" [rows]="5" [inline]="true" [lazy]="true" (onLazyLoad)="loadData($event)" scrollHeight="500px">
  <p-header>
      Scroll Down to  Load More
  </p-header>
  <ng-template let-activityLog pTemplate="item">
      <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5">
          <div class="ui-grid-row">
              <div class="ui-grid-col-3" style="text-align:center">
                <img class="responsive" width="120rem" height="130rem" src="assets/showcase/images/1.jpg">
              </div>
              <div class="ui-grid-col-9">
                  <div class="ui-grid ui-grid-responsive ui-fluid">
                      <div class="ui-grid-row">
                          <div class="ui-grid-col-2">編號: </div>
                          <div class="ui-grid-col-10">{{activityLog.ActivityLogId}}</div>
                      </div>
                      <div class="ui-grid-row">
                          <div class="ui-grid-col-2">內容: </div>
                          <div class="ui-grid-col-10">{{activityLog.Description}}</div>
                      </div>
                      <div class="ui-grid-row">
                          <div class="ui-grid-col-2">設備: </div>
                          <div class="ui-grid-col-10">{{activityLog.DeviceName}}</div>
                      </div>
                      <div class="ui-grid-row">
                          <div class="ui-grid-col-2">時間: </div>
                          <div class="ui-grid-col-10">{{activityLog.Time}}</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </ng-template>
</p-dataScroller>

<p-dialog header="activityLog Details" [visible]="displayDialog"  showEffect="fade" [modal]="true" width="225" (onAfterHide)="onDialogHide()">
  <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="selectedActivityLog" style="font-size:16px;text-align:center;padding:20px">
      <div class="ui-grid-row">
          <div class="ui-grid-col-12" style="text-align:center"><img src="assets/showcase/images/1.jpg"></div>
      </div>
      <div class="ui-grid-row">
          <div class="ui-grid-col-4">編號: </div>
          <div class="ui-grid-col-8">{{selectedActivityLog.ActivityLogId}}</div>
      </div>
      <div class="ui-grid-row">
          <div class="ui-grid-col-4">內容: </div>
          <div class="ui-grid-col-8">{{selectedActivityLog.Description}}</div>
      </div>
      <div class="ui-grid-row">
          <div class="ui-grid-col-4">設備: </div>
          <div class="ui-grid-col-8">{{selectedActivityLog.DeviceName}}</div>
      </div>
      <div class="ui-grid-row">
          <div class="ui-grid-col-4">時間: </div>
          <div class="ui-grid-col-8">{{selectedActivityLog.Time}}</div>
      </div>
  </div>
</p-dialog> 

 

component部分：

import { Component, OnInit, Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import { DataScrollerModule} from 'primeng/primeng';

import { ScrollService } from './scroll.service';
import { ActivityLog } from './scroll.model';

@Component({
  selector: 'app-scroll-refresh',
  templateUrl: './scroll-refresh.component.html',
  styleUrls: ['./scroll-refresh.component.css']
})
export class ScrollRefreshComponent implements OnInit {
  activityLog: ActivityLog[];
  selectedActivityLog: ActivityLog;
  displayDialog: boolean;

  constructor(private personService: ScrollService) { }

  ngOnInit() {
    this.personService.getActivities(0, 5).then(person => {
      this.activityLog = person;
    });
  }

  selectPerson(person: ActivityLog) {
    this.selectedActivityLog = person;
    this.displayDialog = true;
  }

  onDialogHide() {
    this.selectedActivityLog = null;
  }

  loadData(event) {
    console.log('==== lazy load ====');
    event.first += 5;
    event.rows = 5;
      if (event.first < 50) {
         console.log(event.first);
          return this.personService.getActivities(event.first, event.rows).then(person => {
                    console.log(person);
                    person.forEach((val) => {
                      this.activityLog.push(val);
                    });
                 });
      } else {
        event.first = 0;
        console.log(event.first);
        return;
      }
  }
}

 

service部分：

import { Injectable } from '@angular/core';
import {Http, Response } from '@angular/http';

import { ActivityLog } from './scroll.model';

import 'rxjs/add/operator/toPromise';


@Injectable()
export class ScrollService {

  constructor(private http: Http) { }

  getActivities(start: number, end: number) {
    return this.http.get('http://localhost:52513/api/activitylogs?start=' + start + '&end=' + end)
                .toPromise()
                .then(res => {
                  return res.json();
                })
                .then(data => {
                   return  data;
                });
    }
}

 

model部分：

export class ActivityLog {
    ActivityLogId: string;
    PatientId: string;
    Therapist: string;
    DeviceName: string;
    Description: string;
    ActivityId: string;
    Time: Date;
    Seconds: number;

    public constructor(
        fields?: {
            ActivityLogId: string;
            PatientId: string;
            Therapist: string;
            DeviceName: string;
            Description: string;
            ActivityId: string;
            Time: Date;
            Seconds: number
        }) {
            if (fields) Object.assign(this, fields);
        }
}

 

app.module部分：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule, LocationStrategy, HashLocationStrategy} from '@angular/common';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

import { HttpModule} from '@angular/http';

// primeNG module
import { ScrollService } from './scroll-refresh/scroll.service';
import { MenuItem, AccordionModule, CalendarModule, TabViewModule, CodeHighlighterModule } from 'primeng/primeng';
import { DataScrollerModule} from 'primeng/primeng';
import { DataTableModule} from 'primeng/primeng';
import { DialogModule} from 'primeng/primeng';

// custom primeNG component by myself
import { AppComponent } from './app.component';
import { ScrollRefreshComponent } from './scroll-refresh/scroll-refresh.component';


@NgModule({
  declarations: [
    AppComponent,
    ScrollRefreshComponent,
  ],
  imports: [
    BrowserModule,
    AccordionModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    CalendarModule,
    TabViewModule,
    CodeHighlighterModule,
    DataScrollerModule,
    DataTableModule,
    DialogModule,
    HttpModule,
  ],
  providers: [
    ScrollService,
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [ScrollRefreshComponent]
})
export class AppModule { }

 

注: 在app.module文件中我導入了primeNG的很多模塊，因為在其他文件中我有用到這些模塊，但是如果你只是實現滾動刷新的話，導入對應的模塊即可。

 

angular-cli.json文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "new-date"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

 

需要注意的是，實現分段式加載的關鍵是每次刷新都只加載一部分數據，即只向數據庫中拿取一部分數據而不是一次性全部獲取，所以在這方面，必須在后端也要進行配置，前端每次刷新時向后端傳遞2個參數：start和end，start表示從哪條數據開始獲取，end表示一次獲取多少條數據，類似於數據的分頁展示。

 

另外，這個demo是一個基於angular-cli實現的用webpack打包的angular應用，一切配置都是在這個前提下完成的，但是如果你的angular應用是基於system.js用gulp打包實現的，那么你的配置方式與我的demo是不相同的。即，在用命令行安裝該組件后，還必須在system.js文件中手動進行配置依賴，這里就不多說了，可以參考primeNG官網的例子。