作者： 老葛 亚艾元软件
原来代码：
import { Component } from '@angular/core';
import { Injectable, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import { NavController, NavParams } from 'ionic-angular';
import { CaseDetailsPage } from '../case-details/case-details';
//import { APP_CONFIG, AppConfig } from '../../app/app-config.module';
import { AppSettings } from '../../app/app.settings';
//import { Api } from '../../providers/api';
//import { ViewsListPage } from '../viewslist';
@Component({
selector: 'page-caselist',
templateUrl: 'caselist.html'
})
@Injectable()
export class CaseListPage{
public items: any = [];
private pageNum:number = 0;
private pageSize:number = 10;
private hasMore:boolean = true;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private http: Http
//@Inject(APP_CONFIG) private config: AppConfig
) {
}
ionViewDidLoad() {
this.loadCases();
// 网络请求
}
loadCases() {
return new Promise(resolve => {
var url = AppSettings.API_ENDPOINT + '/caselistjson?page=' + this.pageNum;
setTimeout(() => {
this.http.request(url)
.subscribe((res: Response) => {
//this.items = res.json().nodes;
let tempItems = this.items;
let nodes = res.json().nodes;
this.items = tempItems.concat(nodes);
if(nodes.length < this.pageSize){
this.hasMore = false;
}
//this.items.concat(res.json().nodes);
console.log(this.items);
resolve(true);
});
}, 500);
});
}
doInfinite(infiniteScroll) {
if(this.hasMore){
console.log('doInfinite, start is currently '+this.pageNum);
this.pageNum+=1;
this.loadCases().then(()=>{
infiniteScroll.complete();
});
}else{
//infiniteScroll.complete();
infiniteScroll.enable(false);
}
}
itemTapped(event, item) {
this.navCtrl.push(CaseDetailsPage, {
item: item
});
}
}
改造后：
import { Component } from '@angular/core';
import { Injectable, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import { NavController, NavParams } from 'ionic-angular';
import { CaseDetailsPage } from './case-details/case-details';
//import { APP_CONFIG, AppConfig } from '../../app/app-config.module';
import { AppSettings } from '../app/app.settings';
//import { Api } from '../../providers/api';
@Component({
selector: 'page-viewslist',
templateUrl: 'viewslist.html'
})
@Injectable()
export class ViewsListPage {
public items: any = [];
protected pageNum:number = 0;
protected pageSize:number = 10;
protected hasMore:boolean = true;
protected internalUrl:string;
protected childComponent:any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
protected http: Http
//@Inject(APP_CONFIG) private config: AppConfig
) {
//this.childComponent = CaseDetailsPage;
}
ionViewDidLoad() {
this.loadItems();
// 网络请求
}
loadItems() {
return new Promise(resolve => {
var url = AppSettings.API_ENDPOINT + this.internalUrl +'?page=' + this.pageNum;
setTimeout(() => {
this.http.request(url)
.subscribe((res: Response) => {
//this.items = res.json().nodes;
let tempItems = this.items;
let nodes = res.json().nodes;
this.items = tempItems.concat(nodes);
if(nodes.length < this.pageSize){
this.hasMore = false;
}
//this.items.concat(res.json().nodes);
console.log(this.items);
resolve(true);
});
}, 500);
});
}
doInfinite(infiniteScroll) {
if(this.hasMore){
console.log('doInfinite, start is currently '+this.pageNum);
this.pageNum+=1;
this.loadItems().then(()=>{
infiniteScroll.complete();
});
}else{
//infiniteScroll.complete();
infiniteScroll.enable(false);
}
}
itemTapped(event, item) {
this.navCtrl.push(this.childComponent, {
item: item
});
}
}
创建了一个viewslist.ts文件。
新版的代码缩小了很多：
import { Component } from '@angular/core';
import { Injectable, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import { NavController, NavParams } from 'ionic-angular';
//import { CaseDetailsPage } from '../case-details/case-details';
//import { APP_CONFIG, AppConfig } from '../../app/app-config.module';
import { AppSettings } from '../../app/app.settings';
import { ViewsListPage } from '../viewslist';
import { CaseDetailsPage } from '../case-details/case-details';
@Component({
selector: 'page-caselist',
templateUrl: 'caselist.html'
})
@Injectable()
export class CaseListPage extends ViewsListPage{
constructor(
public navCtrl: NavController,
public navParams: NavParams,
protected http: Http
//@Inject(APP_CONFIG) private config: AppConfig
) {
super(navCtrl, navParams, http);
this.childComponent = CaseDetailsPage;
this.internalUrl = '/caselistjson';
}
}
子类的构造函数里面，需要调用：
super(navCtrl, navParams, http);
不然会报错。
注意private, protected之间的区别。
Private ： 只能在自己内部使用。
Protected ： 在自己内部和孩子里面使用。
