在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;
}