Angularチュートリアルをやる 5日目

■ 思ったこと

次の章に行くごとにわけわからん状態になってその都度勉強していく感じ、ほぼ世界樹の迷宮ですね

■ 5. ルーティングを使ったナビゲーションの追加

Angularルーターを使って画面遷移をやっていこう！

AppRoutingModule

ルーティング専用のトップレベルモジュールっていうのがあると良い
慣例でモジュールのクラス名はAppRoutingModuleとなるよ！
モジュールはng generate module app-routing --flat --module=appで作る
- --flat：src/appに生成したファイルを置く
- ---module=app：AppModuleのimports配列に生成したモジュールを登録する（使うために登録は必須！）
が、プロジェクト作成時に自動で作ってたみたいだ、もうあった！
routes配列にHeroesComponentのpathとコンポーネント名を設定、こうするとhttp://localhost:4200/heroesが使えるようになる

RouterOutletを使う

AppRoutingModuleで設定したルーティングを設定するには、html上でrouter-outletタグを書いてあげればOK

routerLinkも使う

詳細にどこへ飛ぶか？は<nav>要素の中にaタグ入れてrouterLinkを設定してあげるべし。routerLinkはこれでクリックをルーターのナビゲーションへ変換するセレクタだ。もうコンポーネントを直接書く必要はないぜ！

ダッシュボードビューを追加しよう

正直、ルーティングって複数ページnight意味ないし、も一個ぐらいコンポーネント増やしたいよね？おっしゃる通り、ということでng generate component dashboardをしましょう
ダッシュボードビューではヒーロー配列からピックアップしてヒーローを表示する、なのでこちらのコンポーネントにもheroServiceを注入してgetHeroes()を使おう！

デフォルトルート

空パスの場合に自動遷移させるにはAppRoutingModule routes配列に{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },を追加するべし（今回はダッシュボードをデフォルト遷移先にするのだ）

詳細画面を遷移先に変えよう

今はHeroesComponentでヒーロー名クリックしたら下に出る感じですが…いろんなとこから遷移して表示する形に改修しよう
heroes.component.htmlのbuttonはrouterLinkに変更、リンク先はdetailにhero.idを足したものとする。idが2としたら、こんな感じになる！例）~/detail/2
選択したheroを元にonSelect()で詳細画面を表示する部分もいらなくなるよ
当然、今のままではリンク先には飛べないが・・？？

hero-detail.component.tsの大改修

~/detail/idありきで、idを取得し、そのデータをサービスからGETできるようにしましょう
そのためにもconstructorに以下を追加するノダ
- ActivatedRoute：ルートに関する便利機能を色々持ってるクラス
- HeroService：おなじみ！サービスからデータをもらおう
- Location：ブラウザのURLをいい感じにやりとりするサービス、今回は前のビューに戻るのに使う

  constructor(
    private route: ActivatedRoute,
    private heroService: HeroService,
    private location: Location
  ) {}

URLからidを取得するのにrouteが使えるぞ。route.snapshotでコンポーネントが作成されたときのルート情報を取得しよう！スクショのURLはhttp://localhost:4200/detail/1
ルートパラメータは文字列なので、Numberでキャストを忘れずに
idが特定出来たらいつも通りサービスから取得すればOK

  getHero() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.heroService.getHero(id).subscribe((hero) => (this.hero = hero));
  }

ちなみに、修正前は親コンポーネントからheroがバインディングされていたが…今の詳細コンポーネントは親から独立しているので@Input hero?: Hero;から@Inputは不要になる
getHero()はHeroServiceがないのでこの時点ではエラーになるぞ、早急にHeroService.getHero()を追加するのだ！

戻るボタンの追加

詳細画面からまえのがめんにもどれなくっちゃね、hero-detail.component.htmlに戻るボタンを追加しよう！
クリック時のイベントにはgoBack()を追加してhero-detail.component.tsに実装しよう
location.back()を使えばよいです

■ 感想

くっついてるコンポーネントはなるべくマルっくとホドホドにホドいてイェ～そどってねツァク。

ペロハム大学

ﾔﾙｿﾞｰ