Angular のルーティングの基本とRoutes の使い方

求人
Angular のルーティングの基本とRoutes の使い方

Angularにはルーティングという機能があります。描画領域をコントロールする仕組みです。

ルーティングを実現させるには、RoutesとRouterModuleをインポートする必要があります。

ルーティングは複数個所存在する可能性があるため、モジュールとしてファイルを作成したほうが良いと思います。

app.route.module.ts

上記は、定義の順番が関係あり、上から順にpathがmatchするコンポーネントが使用されます。本来は、ルーティングで利用するコンポーネントはdeclarationsで指定しますが、上記のように別ファイルでモジュールにしておくと、ルートモジュールが簡潔に書けるため良いと思います。

app.module.ts(ルートモジュール)

Router.navigateメソッドを使用する

テンプレート(ビュー)には以下のように記述してルータによる描画領域を定義します。

上記で問題ないのですが、描画領域が複数存在する場合は区別をつけるために名前付きoutletを設定します。具体的にはname属性を追加するだけです。

基本的には名前付きoutletを使用しておいたほうが良いと思います。

描画領域をルータ経由で表示、非表示してみます。navigateメソッドで実現します。

app.component.ts

Angular のルーティングの基本とRoutes の使い方

表示させるとURLが変わってしまいます。

URLを変更しないように設定する

ルーティング機能を使ってもURLを変更させないようにしたい場合、skipLocationChangeをtrueにすることで変更させないようにすることができます。

以下、skipLocationChangeをtrueにした例です。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA