Angular2记录

对象转Observable

import { of } from 'rxjs';

of(1,2,3)

Promise转Observable

import {from} from "rxjs";
const 新的observable = from(原来的promise)

http请求后做处理

import { catchError, map } from 'rxjs';

    this.http.get(url).pipe(
        map(res => {
          //do something
          localStorage.setItem('xxxx', JSON.stringify(res))
          //return
          return res
        }),
        catchError(err => {
          return Observable.throw(err);
        })
      )

同步多个http请求

    let http1 = this.http.get('url')
    let http2 = this.http.get('url')
    let http3 = this.http.get('url')

import { zip, forkJoin, merge } from 'rxjs';

    forkJoin(http1, http2, http3).subscribe((res) => {
      //执行一次，多个对象
      console.log(res)
    })

    zip(http1, http2, http3).subscribe(([res1, res2, res3]) => {
      //执行一次，对象分开
      console.log(res1)
      console.log(res2)
      console.log(res3)
    })

    zip(http1, http2, http3).subscribe((res) => {
      //执行一次，多个对象
      console.log(res)
    })

    merge(http1, http2, http3).subscribe((res) => {
      //执行多次，每次一个对象
      console.log(res)
    })

异步操作中返回Observable

import { Subject } from 'rxjs';

chooseImage(): Observable<any> {
    const subject = new Subject();
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        const localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        subject.next(localIds)
      }
    });
    return subject.asObservable()
  }

微信浏览器中上传图片之后不触发图片的load事件

需要在改变改变图片的src，或者是新增img，或者是新增div(背景)之后，通过调用如下方法重新检测：

import {ChangeDetectorRef} from '@angular/core';

constructor(private cd: ChangeDetectorRef) {}

if (!this.cd['destroyed']) {
   this.cd.detectChanges();
}

自组件如何改变父组件样式？

如改变最外层html标签的样式，可以加 ::ng-deep 实现：

::ng-deep html {
  height: 100%;
  background-image: radial-gradient(circle, #1280e1 0%, #002069 100%);
}

表单中的字段类型是数组

<form [formGroup]="form" (ngSubmit)="submit()">
  <table>
    <tr>
      <th>name</th>
      <td>
        <input type="text" formControlName="name">
      </td>
    </tr>

    <tr>
      <th>list</th>
      <td>
        <button type="button" (click)="add()">+</button>
      </td>
    </tr>

    <tr *ngFor="let item of list.controls;let i = index">
      <td>
        <button type="button" (click)="remove(i)">-</button>
      </td>
      <ng-container [formGroup]="item">
        <td>
          <input type="text" formControlName="key">
        </td>
        <td>
          <input type="text" formControlName="value">
        </td>
      </ng-container>
    </tr>

    <tr>
      <td>
        <button type="submit">提交</button>
      </td>
    </tr>
  </table>
</form>

import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormGroup} from "@angular/forms";

  form: FormGroup;

  constructor(
    private fb: FormBuilder,
  ) {
  }


  ngOnInit(): void {
    this.form = this.fb.group({
      name: [],
      list: this.fb.array([])
    });
  }

  get list() {
    return this.form.get('list') as FormArray
  }

  add() {
    this.list.push(this.fb.group({
      key: [],
      value: [],
    }))
  }

  remove(idx) {
    this.list.removeAt(idx)
  }

  submit() {
    for (const i in this.form.controls) {
      this.form.controls[i].markAsDirty();
      this.form.controls[i].updateValueAndValidity();
    }
    console.log(this.form.value)
  }

复制文本

传统复制文本一般这么写：

copy(item: string): void {
  const el = document.createElement('textarea');
  el.value = item;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}

但是其中有些API已经过时了，不一定啥时候就会移除，在Angular中有专门的API来实现复制到剪贴板的功能：

import { Clipboard } from '@angular/cdk/clipboard';

constructor(
    private clipboard: Clipboard,
) {}

this.clipboard.copy(`这里是需要复制的文版`);