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))

行内样式

  <div   [style.max-width.%]="cardWidth"    [style.-webkit-box-flex]="1"> </div>

时间选择器

 <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' });

主题切换如果让父子css同步

想到一个比较使用的思路

<app-has-error [classInput]="one"></app-has-error><button (click)="toggleClick()">toggle</button>

  one: string = 'aaa'  toggleClick() {    this.one = this.one === 'aaa' ? 'bbb' : 'aaa';  }

子组件

<div [class]="classInput"></div>  @Input() classInput: string = 'aaa'

.aaa{  --aa:#000;}.bbb{  --aa:red;}.text-app{  background-color: var(--aa);}

或者用::ng-deep

父组件返回子组件的css

父html<app-text3 class="app-text3"></app-text3>子html<div class="app1">测试1</div>

// 这种不推荐, 这样就编程全局的样式::ng-deep .app-text3 {   .app1 {    background-color: red;  }}// 这种是通过编译后的组件去找子组件的css.app-text3 {  ::ng-deep  .app1 {    background-color: red;  }}

:host-context

子添加父组件的css, 可以形成独特性

父html

<app-text3 class="app-text3"></app-text3>  // 有效<app-text3 class="app-text2"></app-text3> // 无效

子的css

:host-context(.app-text3) {  .app1 {    background-color: red;  }}

动态加载js

https://github.com/angular/components/tree/master/src/google-maps#readme

模块

@NgModule({  imports: [ +   HttpClientModule, +   HttpClientJsonpModule,  ],})

组件

export class GoogleMapsDemoComponent {  apiLoaded: Observable<boolean>;  constructor(httpClient: HttpClient) {    this.apiLoaded = h 天津红色教育培训 www.jsganxun.cn ttpClient.jsonp('https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE', 'callback')        .pipe(          map(() => true),          catchError(() => of(false)),        );  }}

retry

就是当请求失败重试几次

const source = interval(1000);  const example = source.pipe(    mergeMap(val => {      if(val > 5){        return throwError('Error!');      }      return of(val);    }),    //retry 2 times on error    retry(2)  );  

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')