ngrx関連

platform/api.md at master · ngrx/platform · GitHub
- OnRunEffects
  - Effectsのライフサイクルをコントロールする
platform/adapter.md at master · ngrx/platform · GitHub
- Entity Adapter

各Feature Module（Page Module）のステートを、画面遷移時にリセットする

meta reducerを使って以下のように実装
LEAVE時にFeatureAのステートをundefinedにする -> 各reducersでinitial stateを設定する

feature-a.module

// ...

StoreModule.forFeature(
  'feature-a',
  fromFeatureA.reducers,
  {  metaReducers: [fromFeatureA.resetReducer]  }
),

reducers/index.ts

// ...

export function resetReducer(reducer: ActionReducer<FeatureAState, routeActions.Actions>) {
  return function (state, action) {
    if (action.type === routeActions.LEAVE) {
      return reducer(undefined, action);
    } else {
      return reducer(state, action);
    }
  };
}

Angular関連

Component/Directive関連

angular - How to add/remove class from directive - Stack Overflow
- rendererを利用して、Hostエレメントにクラスを追加/削除する
- this.renderer.addClass(this.elementRef.nativeElement, className)

アプリケーションに依存するデータを表示するコンポーネントのインターフェース（`@Input`）について

コンポーネントで必要とするデータと、実データ（e.g. アプリ上で利用しているデータ型）の違いがある場合。柔軟なインターフェースにしたほうがいい場合。

@Inputに渡すデータの型をどうするか
- データの形式を固定してしまうと、いつか苦労する
  - APIによってサーバから送られるデータが違う場合
  - サーバからもらうデータと、クライアントで作成したデータが同じ構造になるとは限らない
@Inputの数 = 更新タイミングの数
- 不要に増やしたくはない

show-data.component.ts

 export interface IShowDataProps {
  a: number;
  b: numebr;
  c?: string;
  d?: string;
  e?: boolean;
}

// ...

export class ShowDataComponent {
  /**
   * `appData`か`props`のどちらかを受け取り
   * `_props`をつくる
   */
  _props: IShowDataProps;
  @Input() set params(
    params: { appData?: AppData, props?: IShowDataProps, options?: any }
  ) {
    if (params.appData) {
      this._props = this.toProps(params.appData);
    } else if (params.props) {
      this._props = params.props;
    }
  }
  get props() { return this._props; }

  // ...

}

page.html

<show-data [params]="{ appData: appData }"></show-data>
<show-data [params]="{ appData: appData, options: {...} }"></show-data>
<show-data [params]="{
  props: {
    a: 100,
    b: 1000',
    c: 'c',
    e: true,
  }
}">