【Angular】ルーティング(app-routingを使わない場合)
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
Angularのルーティングを学習したので、備忘録を書きます。
app-routingを使わないルーティングの実装
前提として、遷移したいページ(Heroesコンポーネント)が作られていること。
作れていない場合はAngularのチュートリアルを参考に作ってください。
Angular 日本語ドキュメンテーション
app.moduleにRouterModuleを反映させる。
import { RouterModule } from '@angular/router';
...省略
imports: [
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
],
forRootメソッドはindex.htmlのbaseの配下に設定されるメソッド。
例えば、baseで「/」が設定されていれば「/heroes」にアクセスすることになる。
app.component.hemlにあったselectorを「router-outlet」に変更する。
<router-outlet></router-outlet>
app.component.hemlにリンクを追加する。
<a routerLink="/heroes">ヒーロー一覧</a>
これで「/heroes」(ヒーロー一覧のリンク)にアクセスすると、「router-outlet」がHeroesComponentを参照してくれるようになります。
今後に向けて
少しかっこ悪いので、次回はapp-routingを使ったルーティング実装を記事にしていきたいです。
参考
素晴らしい記事に感謝いたします。
