Angular TypeScript 框架学习笔记

Angular TypeScript 框架学习笔记

版本 8.0

TypeScript版本3.4.5

接口对象

必须声明在组件配置声明至上，import之下

声明

必须指定参数数据类型

// 定义接口数据类型
// 至关于定义了一个全局obj对象
// 并定义每一个键值的数据类型
// 方便内部参数继承
interface WebData {
    StartTime: null | number;
    EndTime: null | number;
    Department: null | number;
    BusinessType: null | number;
}

继承

在 class 内声明变量继承接口

// class 内声明变量，数据类型为 webData 接口的数据格式
// 至关于在 class 内声明了一个全局 obj 对象
// 必须设定默认值
SearchData: WebData = {
    StartTime: null,
    EndTime: null,
    Department: null,
    BusinessType: null
};

class

class内声明变量方法

不主动声明变量类型

// 数据类型默认为 any
dateFormat = 'yyyy-MM-dd';

主动声明变量类型

SelectionDepartmentSelectionValue: string | number = 'any';

数组变量声明方式

SelectTimePeriodTypeDataList: Array<{ id: string, label: string }> = [
    {
        id: 'any',
        label: '不限时间'
    }, {
        id: 'ToDay',
        label: '今天'
    }, {
        id: 'YesterDay',
        label: '昨天'
    }, {
        id: 'TheWeek',
        label: '本周'
    }, {
        id: 'LastWeek',
        label: '上周'
    }, {
        id: 'TheMonth',
        label: '本月度'
    }, {
        id: 'LastMonth',
        label: '上月度'
    }, {
        id: 'TheQuarter',
        label: '本季度'
    }, {
        id: 'LastQuarter',
        label: '上季度'
    }, {
        id: 'TheYear',
        label: '本年度'
    }, {
        id: 'LastYear',
        label: '上年度'
    }
];

修改 class 内变量值

this指向的是 class自己

export class SearchConditionComponent implements OnInit {
    // class 内声明变量，数据类型为 webData 接口的数据格式
    // 至关于在 class 内声明了一个全局 obj 对象
    // 设定默认值
    SearchData: WebData = {
        StartTime: null,
        EndTime: null,
        Department: null,
        BusinessType: null
    };
  
    // 开始时间
    StartingTime: Date = new Date();
    // 结束时间
    EndTime: Date = new Date();

    dateFormat = 'yyyy-MM-dd';
    // 开始时间
    StartingTime: Date = new Date();
    // 结束时间
    EndTime: Date = new Date();

    constructor(private fb: FormBuilder) {
    }

    ngOnInit(): void {
        this.StartingTime = setHours(this.StartingTime, 0);
        this.StartingTime = setMinutes(this.StartingTime, 0);
        this.StartingTime = setSeconds(this.StartingTime, 0);
        this.EndTime = setHours(this.EndTime, 23);
        this.EndTime = setMinutes(this.EndTime, 59);
        this.EndTime = setSeconds(this.EndTime, 59);
        //
        this.SearchData.StartTime = getUnixTime(this.StartingTime);
        this.SearchData.EndTime = getUnixTime(this.EndTime);
        console.log(this.SearchData);
    }

}

表单

input

双向绑定

<input nz-input placeholder="" autocomplete="off" nzSize="small" [(ngModel)]="SearchData.CustomerName" />