You are here

ionic3/angular4,利用面向对象的继承性精简代码

作者: 老葛 亚艾元软件

原来代码:

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 : 在自己内部和孩子里面使用。


论坛:

Drupal版本: