【Angular】ルーティング(app-routingを使う場合)
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
Angularのルーティングを学習したので、備忘録を書きます。
app-routingを使うルーティングの実装
前提として、遷移したいページ(Heroesコンポーネント)が作られていること。
作れていない場合はAngularのチュートリアルを参考に作ってください。
Angular 日本語ドキュメンテーション
app-routingを作成する。
ng generate module app-routing --flat --module=app
作成したapp-routingを以下のように置き換える。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
const routes: Routes = [
{ path: 'heroes', component: HeroesComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.hemlにあったselectorを「router-outlet」に変更する。
<router-outlet></router-outlet>
app.component.hemlにリンクを追加する。
<a routerLink="/heroes">ヒーロー一覧</a>
これで「/heroes」(ヒーロー一覧のリンク)にアクセスすると、「router-outlet」がHeroesComponentを参照してくれるようになります。
今後に向けて
個人的には前回よりもこちらのやり方が好きです。
モジュールはモジュール、ルーティングはルーティングのように役割ごとに分けていた方が見やすいからです。
ここからさらにルーティングを分けることも今後していきます。
参考
素晴らしい記事に感謝いたします。
