转自:https://blog.csdn.net/River_Continent/article/details/78023954
在Ionic文件中,有以下几个步骤:
1.import导包;
import {Component} from '@angular/core';
import {IonicPage, NavParams, ToastController, AlertController, LoadingController, Platform, App} from "ionic-angular";
import {DatabaseService} from "../database.service";
import {TransferObject, Transfer} from "@ionic-native/transfer";
import {File} from "@ionic-native/file";
import {FileOpener} from "@ionic-native/file-opener";
import {InAppBrowser} from "@ionic-native/in-app-browser";
import pinyin from 'js-pinyin';
2.导入组件Component
@IonicPage()
@Component({
selector: 'databaseData',
templateUrl: './databaseData.html',
providers: [DatabaseService,TransferObject]
})
这里@IonicPage()是因为下面有分页模式;
selector:选择器,就是我这个页面的方法对应的html页面名字,去掉后缀之后的名字;
templateUrl:表示对应的页面的全称;
providers:提供者,表示由那个服务者提供的;我们可以这么类比
支付宝支付方法提供者(providers):[阿里巴巴有限公司,手机,服务商,商铺];
义务教育提供者(providers):[政府,法律,学校,父母,老师]
3.创建主类Component
export class DatabaseDataComponent {
}
如果是主方法,需要加*Component来命名;原则上一个ts文件中只有一个Component为主类;
在主类中有以下几个模块:
①初始化:就是给各个变量一个初始化的值:
pdfList:any ={};
pageIndex=1;
profession:string;
id:number;
tempUrl:any;
type:any;
state:any;
searchingItems = []; //搜索显示的数组
fileDataList=[];
allSearchFileDataList = []; //未排序供搜索的数组
formatFileDataList: Array<FileDataList> = new Array();
searchQuery: string = '';
items: string[];
isSearching = false;
searchInput:string;
这里:
初始化的格式为:变量名:数据类型;
大括号{ }:表示对象:类似于Java中的实体类pojo;
中括号[ ]:表示数组;
如果不知道写什么类型,可以写any;TypeScript,简称ts(ts是JavaScript的超集,ts可以兼容js,你全部当js来写也没有问题);如果可以确定,可以写具体点;string即JavaScript中的String;在ts或js中,没有明确字符概念,可以全部理解为字符串;所以,一般情况下,单引号和双引号没有太大区别;声明一个字符串可以用单引号‘’也可以用双引号“”;
②构造;
/*warn service,插件,控制器,对象等的构造*/
constructor(private databaseService:DatabaseService,
private inAppBrowser: InAppBrowser,
private navParams:NavParams,
private transfer: Transfer,
private fileTransfer:TransferObject,
private toastCtrl:ToastController,
private loadingCtrl:LoadingController,
private alertCtrl:AlertController,
private fileOpener: FileOpener,
private app:App,
private file:File,
private platform: Platform,
){
this.profession=this.navParams.get('profession');
this.searchInput = "";
}
小括号里定义构造变量的作用域修饰符,变量名,变量类型;一般是【重量级】的嘉宾才可以登场:比如官方的一些默认对象;还有你自己定义的Service;
3.方法:这里方法比较简单,不需要用
function(){
}
这种定义方法,直接方法名+小括号+大括号即可;
ngOnInit() {
this.pageChange(this.pageIndex);
}
例如上面的官方的初始化方法,初始化加载的一些方法;ngOnInit是方法名,小括号内放参数,大括号内放逻辑代码;方法内也可以引用方法;例如上面的pageChange(this.pageIndex);也是一个方法;如果该方法在本文件中,直接用this引用;这里用了this引用,所以,pageChange()这个方法一定在本文件(本页面);对比内外这两个方法,我们知道,第一个方法是无参的,因为ngOnInit()小括号里没有参数;里面的方法pageChange(this.pageIndex)里面有this.pageIndex,所以,pageChange方法是有参方法;
而且,这个参数是在本文件(本页面)初始化,并且在本文件(本页面)定义的,因为用的是this引用的;到了这里,大家对this的作用也明确了;this就是引用本文件(本页面)的参数,方法;翻译为中文可以是:“这个”参数,“这个”方法;既然翻译成“这个”,必然是附近的,或者是不久前刚提到,刚用过的;只能是这个页面的东西;水浒里说“这厮”,就是指面前的这人,或者和别人谈话中提起到的人物;刚发生不久的;
4.创建分类
第一个类:
/*warn 搜索框——创建列表KV键值对 */
export class FileDataList {
key: string;
value: Array<any> ;
}
第二个类:
/*warn 搜索框——创建文件对象*/
export class FileDataObj {
name: string;
lastupdateby: string;
pinyinName: string;
profession:string;
url:string;
query_startDate:string;
query_endDate:string;
trainId:string;
state:string;
}