10月メモ・リンク集

angular ngrx rx typescript メモ集

これは何か

  • 10月に調べたことのメモ
  • 基本形式は、「参考URLとそれに関するメモとコメント」

ngrx関連

ngrxとフォーム

Introducing @ngrx/entity – @ngrx – Medium

状態のリセット

// foo.module.ts
...
StoreModule.forFeature(
  'foo',
  fromCalendar.reducers,
  {
    metaReducers: [fromFoo.resetReducer]
  }
),
...

// reducers/index.ts
export function resetReducer(reducer: ActionReducer<FooState, reset.Actions>) {
  return function (state, action) {
    if (action.type === RESET) {
      return reducer(undefined, action);
    } else {
      return reducer(state, action);
    }
  };
}

How to share state between reducers best practice · Issue #159 · ngrx/example-app · GitHub

Rx関連

unsubscribe

その他

Angular関連

view操作

ngOnInit() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent);
  const componentRef = componentFactory.create(this.viewContainer.injector);
  this.renderer.appendChild(
    this.viewContainer.element.nativeElement,
    componentRef.location.nativeElement
  );
}

フォーム

export class ChildComponent implements OnInit {
  ...
  @ViewChild("model") ngModel: NgModel;

  ngOnInit() {
    this.parentForm.addControl(this.ngModel); // <== add this
    this.parentForm.valueChanges.subscribe(changes => {
      console.log(JSON.stringify(changes));
    });
  }
}

その他

null vs undefined

TypeScript

スニペット

Bootstrap4, デスクトップファースト

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

Htmlの<base href>を取得

// <base href="/ja/">
const bases = document.getElementsByTagName('base');
if (bases.length > 0) {
  const baseHref = bases[0].href;
  // -> 'https://foo.com/ja/'
}

Bugsnag

import { ErrorHandler, Injectable } from '@angular/core';
import { environment } from '../../environments/environment';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor() {
    Bugsnag.releaseStage = environment.stage;
  }
  handleError(error) {
    Bugsnag.notifyException(error);
    throw error;
  }
}

ローダーのオンオフ、簡易版

function disable() {
  const elm: HTMLElement | null = document.getElementById('blocker');
  if (elm) {
    elm.classList.add('active');
  }
}

function enable() {
  const elm: HTMLElement | null = document.getElementById('blocker');
  if (elm) {
    elm.classList.remove('active');
  }
}

Clickメモ

Array.apply(null, document.querySelectorAll('input[type=radio][value="3"]')).forEach(elm => elm.click());