避免生成css
ng g c xxx --style=none
数据结构渲染Form表单
import {Validators} from "@angular/forms"; const dateForm = { sex: {value: null, required: true, maxLength: 10}, gender: {value: 20, required: true,}, } interface formObj { value: null | string | number, required: boolean, maxLength?: number } interface dateType { [propName: string]: formObj } const hasArr = (dataForm: dateType) => { const obj = Object.create(null); for (const item in dataForm) { const keyArr: any = [dataForm[item].value, []]; if (dataForm[item].required) { keyArr[1].push = Validators.required } if (dataForm[item].maxLength) { keyArr[1].push = Validators.maxLength(dataForm[item].maxLength as number) } obj[item] = keyArr } return obj } this.fb.group(hasArr(dataForm))
行内样式
<nz-date-picker #endDatePicker [nzDisabledDate]="getDisabledEndDate" [nzDisabledTime]="getDisabledEndTime" [nzShowTime]="{ nzFormat: 'HH:mm', nzHideDisabledOptions: true }" nzFormat="yyyy-MM-dd HH:mm" [(ngModel)]="selectedEndDate" nzPlaceHolder="结束时间" (nzOnOpenChange)="handleEndOpenChange($event)" ></nz-date-picker>
时间选择器
<nz-date-picker #endDatePicker [nzDisabledDate]="getDisabledEndDate" [nzDisabledTime]="getDisabledEndTime" [nzShowTime]="{ nzFormat: 'HH:mm', nzHideDisabledOptions: true }" nzFormat="yyyy-MM-dd HH:mm" [(ngModel)]="selectedEndDate" nzPlaceHolder="结束时间" (nzOnOpenChange)="handleEndOpenChange($event)" ></nz-date-picker>
// 禁用的时分秒 getDisabledEndDate = () => (d: Date) => { const bt = moment(this.selectedBeginDate).startOf('day').valueOf(); const et = moment(this.endTime).endOf('day').valueOf(); return d.getTime() < bt || d.getTime() > et; }; getDisabledEndTime = () => (currentDate: Date) => { const isSameDateWithEndDate = moment(currentDate).isSame(moment(this.endTime), 'date'); const isSameHourWithEndHour = moment(currentDate).isSame(moment(this.endTime), 'hour'); const isSameDateWithSelectedBeginDate = moment(currentDate).isSame(moment(this.selectedBeginDate), 'date'); const isSameHourWithSelectedBeginHour = moment(currentDate).isSame(moment(this.selectedBeginDate), 'hour'); this.disabledEndTime = this.getDisabledEndTime(); const disabledHours = []; const disabledMinutes = []; if (isSameDateWithEndDate) { for (let i = moment(this.endTime).hour() + 1; i < 24; i++) { disabledHours.push(i); } if (isSameHourWithEndHour) { for (let i = moment(this.endTime).minute() + 1; i < 60; i++) { disabledMinutes.push(i); } } } if (isSameDateWithSelectedBeginDate) { for (let i = 0; i < moment(this.selectedBeginDate).hour() + (moment(this.selectedBeginDate).minute() === 59 ? 1 : 0); i++) { disabledHours.push(i); } if (isSameHourWithSelectedBeginHour) { for (let i = 0; i <= moment(this.selectedBeginDate).minute(); i++) { disabledMinutes.push(i); } } } return { nzDisabledHours: () => { return disabledHours; }, nzDisabledMinutes: (hour) => { return disabledMinutes; }, }; };
scrollIntoView
方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见
scrollIntoView({ behavior: 'smooth', block: 'center' });
jq使用
npm install jquery -S
npm install @types/jquery -D
angular.json
"scripts": [ + "node_modules/jquery/dist/jquery.min.js" ]
使用
import * as $ from 'jquery'; 或者 declare var $:any; $('p')
