angular技巧

Posted 2021-12-03 房东家的猫

withLatestFrom

将源 Observable 与其他 Observable 组合以创建一个 Observable，其值从每个 Observable 的最新值计算，仅当源发出时。

拿到最新的值进行合并

 const sportsNews$ = interval(5000).pipe(
      map(i => `One News ${i}`)
    );

    const worldNews$ = interval(1000).pipe(
      map(i => `Two News ${i}`),
      // tap((v) => console.log(v))
    );
    const customizedNews$ = sportsNews$.pipe(
      withLatestFrom(worldNews$),
      map(([sportNews, worldNews]) => `One: ${sportNews}; Two: ${worldNews}`),
      take(3)
    );
    customizedNews$.subscribe(console.log);

// One: One News 0; Two: Two News 4
// One: One News 1; Two: Two News 9
// One: One News 2; Two: Two News 14

sample

如果不用上面那种方式

  const news$ = interval(1000).pipe(
      map(i => `News ${i}`)
    );

    const latestNews$ = news$.pipe(
      sample(interval(5000)),// 每5s拿到最新的值
      take(3)
    );

    latestNews$.subscribe(console.log);

禁用当前选中

<mat-form-field>
  <mat-select
    [(ngModel)]="selectedBrands"
    [ngModelOptions]="{ standalone: true }"        
    required multiple
  >
    <mat-option
      *ngFor="let brand of brands"
      [value]="brand"
      [disabled]="selectedBrands.indexOf(brand) > -1"
      >{{ brand.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

任意时区的当前时区

// 获取当前时区
const num=- new Date().getTimezoneOffset() / 60;

const newDate=new Date(new Date().getTime()+num*60*60*1000).toISOString()

pluck

从具有多个属性的数组中提取单个属性。

 from([
      { brand: \'Apple\', model: \'max 12 pro\', price: \'$10\'},
      { brand: \'Nokia\', model: \'X 10\', price: \'$50\'}
    ]).pipe(pluck(\'model\'))
      .subscribe(console.log)

// max 12 pro
// X 10

枚举的实际使用

export enum Test1 {
  num1 = \'left\',
  num2 = \'right\'
}

export class TimeSevenComponent implements OnInit, AfterViewInit {
  eye = Test1;
  ngOnInit(): void {
    console.log(this.eye);
  }
}

空值的使用

<h1 [ngClass]="null??\'xxxx\'">Hello World</h1>

angular早期的表单

<input type="text" [ngModel]="sexNum" #foo="ngModel" required (ngModelChange)="setChange($event,foo)">
{{foo.value}} {{foo.errors|json}}

 sexNum=\'\'
 setChange($event: any, foo: NgModel) {
    console.log($event, foo);
  }

案例二

<form #f="ngForm">
  <input type="text" name="one" ngModel #foo="ngModel" required (ngModelChange)="setChange($event,foo)">
  {{f.value |json}}
</form>

 ngForm = {
    one: \'\',
    two: \'\',
  };

angular13

删除ng add包, 如果使用请使用yarn ng add

添加@angular/elements

angualr13别用webstrom20210203 还是有问题

typescript

export type TypeTwo=\'a\'|\'b\'
export type TypeOne = \'c\' | \'d\';
export type TypeThree=`${TypeOne}我是谁${TypeTwo}`
  a: TypeThree = \'d我是谁a\';

超时报错

模拟延迟请求
const obj = new BehaviorSubject(\'bbbb\');
obj.pipe(delay(1000*4))
// 案例
 obj.pipe(delay(1000*4)).pipe(
      timeout(1000 * 4),
      catchError((error: any) => {
        return throwError(\'报错了\')
      })
    ).subscribe(console.log);

输入框失去焦点清空两边空格的指令

@Directive({
  selector: \'[tyFormBlur]\'
})
export class FormBlurDirective implements OnInit {

  constructor(private elementRef: ElementRef, @Self() private ngControl: NgControl) {
  }

  ngOnInit(): void {
    // 失去焦点, 清空两边空格
    fromEvent(this.elementRef.nativeElement, \'blur\').subscribe(() => {
      if (typeof this.ngControl.value === \'string\') {
        const value = this.ngControl.value.trim();
        this.ngControl.control.patchValue(value);
      }
    })
  }
}

promise /observable 转化

   fromPromise(Promise.resolve(\'xxx\')).subscribe(console.log)
    of(1).toPromise().then(console.log)

form表单

ngOnInit(): void {
    this.form = this.formBuilder.group({
      firstName: [{ value: \'Foo\', disabled: true }, [Validators.required]],
      lastName: [\'Bar\']
    });
    this.lastName.disable();
  }

ng-template

<ul>
  <li *ngFor="let item of arr">
    <ng-container *ngTemplateOutlet="sex;context:item"></ng-container>
  </li>
</ul>
<ng-template #sex let-names>
  <h1>我是一个{{names}}</h1>
</ng-template>

  arr:Array<any>=[1,2,3]

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

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

总有一天我也能成为大佬