Angularでデモアプリ作った

デモアプリのリポジトリは[こちら] (https://github.com/topgate/automl-demo)

気づきやちょっとしたテクニックなどを解説

• コンポーネントをRouterで切り替えてるので画面遷移すると元の画面の処理がキャンセルされると思ってたけどそんなことなかった。
• 入力画面 → ロード画面 → 結果画面と遷移する。
• 結果画面から入力画面にブラウザバックで戻れるようreplaceUrl: trueにする。
• service.postでobservable型が返ってくるので、リストにしてforkJoinですべての結果を待つ。
• 結果画面への値の受け渡しはservice経由で行う。

    // リクエスト作成
    const requests = [];
    params.forEach(param => {
      requests.push(this.service.post(param));
    });

    // situationをserviceに保存
    this.service.setSituation(situation);

    // loading画面に遷移
    this.router.navigate(['loading']);

    // リクエスト実行
    forkJoin(requests).subscribe(res => {
      // 成功した場合、resultに遷移
      this.service.setResponse(res);
      this.router.navigate(['result'], { replaceUrl: true });
    });

参考
https://stackoverflow.com/questions/51427689/angular-5-remove-route-history
https://angular.io/api/router/NavigationExtras#replaceUrl