10月メモ・リンク集
これは何か
- 10月に調べたことのメモ
- 基本形式は、「参考URLとそれに関するメモとコメント」
ngrx関連
ngrxとフォーム
- FormControl Freaks: Redux Edition - Daniel Figueiredo Caetano & Renee Vrantsidis - YouTube
- Reduxを使ったフォームの構築
- Template-driven Formsを利用
- ngrxでも考えは一緒
- validはデータとして持つのではなく、selectorで
- formcontrol-freaks/chapter.md at master · renvrant/formcontrol-freaks · GitHub
- スライド版
- Reduxを使ったフォームの構築
Introducing @ngrx/entity – @ngrx – Medium
- 新パッケージ
entity
に関して - platform/docs/entity at master · ngrx/platform · GitHub
状態のリセット
- angular - How to reset all states of ngrx/store? - Stack Overflow
- 各 feature moduleで
metaReducers
を利用してリセット(初期値)に戻す方法
// 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
ActionReducerMap
とcombineReducers
- Beyond combineReducers · Redux
- Reduxにおけるreducer分割とcombineReducersについて - Qiita
Rx関連
unsubscribe
- RxJS: Don’t Unsubscribe – Ben Lesh – Medium
- Unsubscribe処理を必要以上に実行しないですむようなRxの書き方について
takeUntil
,takeWhile
など
- Angular/RxJs When should I unsubscribe from
Subscription
- Stack Overflow- Angularのコンポーネント内で作成したsubscriptionをどのようにunsubscribeするか
ngOnDestroy
,Subject
,takeUntil
を効果的に利用する
その他
- Observable.throw()が返すオブジェクトの型はErrorObservable - ryotah’s blog
- 「テキスト入力 -> 自動で検索開始」を実現するためのRx使い方 - ryotah’s blog
- Http - Observable completed function not firing · Issue #7865 · angular/angular · GitHub
- completeはエラー時には実行されない
- finallyを利用
Angular関連
view操作
- angular4 forms - Load Dynamic templates within a single component using Angular 4 - Stack Overflow
- 前月から引き続き
- templateを動的に外部から読み込んで表示させる #angular
- サンプル
- javascript - How to use Angular structural directive with multiple inputs - Stack Overflow
- Structural Directiveで複数のInput渡し方
<div *permissionIf="permissions;except:'Read'"></div>
- 最終的には以下のようになる
<template [permissionIf]="permissions" [permissionIfExcept]="'Read'">...
- 最終的には以下のようになる
- 動的に、対象要素の内部にコンポーネントを追加する #angualr · GitHub
- 「host要素の次に配置」ではなく、内部に追加したい場合は
renderer.appendChild
を使う - Using Renderer2 in Angular
- 「host要素の次に配置」ではなく、内部に追加したい場合は
ngOnInit() { const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent); const componentRef = componentFactory.create(this.viewContainer.injector); this.renderer.appendChild( this.viewContainer.element.nativeElement, componentRef.location.nativeElement ); }
- RouterLinkActiveとそれをtemplate variableとして利用したときに #angular · GitHub
exportAs
の重要性- 上手く使えば簡単でシンプルなコードを提供できるようになる
フォーム
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
- null - JavaScript | MDN
- APIにおいては、通常はオブジェクトが返されるところで、関連したオブジェクトがない場合に
null
がよく渡されます。
- APIにおいては、通常はオブジェクトが返されるところで、関連したオブジェクトがない場合に
null
vs.undefined
in TypeScript land – BASARAT – MediumDon’t initialize optional sub properties
は確かに
TypeScript
- Revised Revised 型の国のTypeScript | Revised Revised TypeScript in Definitelyland](http://typescript.ninja/typescript-in-definitelyland/)
スニペット
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());