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 = httpClient.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')