LoginSignup
1

More than 3 years have passed since last update.

Angularでデモアプリ作った

Posted at

デモアプリのリポジトリはこちら

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

  • コンポーネントを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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1