Angular开发技巧

避免生成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')