【Angular】ルーティングの設定
こんにちは。
Angularのルーティングの設定についてまとめておこうと思います。
利用するModule
Angularでルーティングの設定をする際には、RouterModuleを利用する。
以下、具体例
app.module.ts
RouterModule.forRoot([
{
path: 'members',
component: MembersComponent
}
])
ちなみに、index.htmlでRootとなるPathを指定するが、そこは以下のようになっている。
index.html
<base href="/">
そのため、今回の場合だと
/members
というようにすると、MembersComponent が呼ばれるというような意味になる。
メインとなるapp.component.tsではRouterOutletを用いる。
このRouterOutletは選択されているPathに該当するComponentを表示するというような意味になる。
そのため、app.component.tsのtemplateを以下のようにする。
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<a routerLink="/members">社員一覧</a>
<router-outlet></router-outlet>
`
})
また、この時該当のLinkへ簡単に遷移することができる、routerLinkというディレクティブもAngularには用意されているので、そちらも併せて利用する。
読んでいただきありがとうございます。
もし、質問や指摘などありましたらコメントに記していただけるとありがたいです。
