【TypeScript】TypeScript+Ionic的Component文件里(ts文件)如何创建对象

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

第二个类:

/*warn 搜索框——创建文件对象*/
export class FileDataObj {
    name: string;
    lastupdateby: string;
    pinyinName: string;
    profession:string;
    url:string;
    query_startDate:string;
    query_endDate:string;
    trainId:string;
    state:string;
}

你可能感兴趣的:(【基础】,【提高】,【心得】,【TypeScript】,【JavaScript】)