angular开发技巧

Posted 2022-03-28 房东家的猫

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

决定自己的高度的是你的态度，而不是你的才能

记得我们是终身初学者和学习者

总有一天我也能成为大佬