【Angularアプリケーション開発 #4】ルーティング設定

今回はルーティングの設定、一覧ページから詳細ページに遷移できるように実装していきます。
また、[http://localhost:4200/](http://localhost:4200/)がリクエストされた場合は、リダイレクトを行って、別ページに遷移するようにしてみます。
- ひとまず、ルーティングに使用するコンポーネントを新規作成しましょう。
MembersComponentを作成します。
tsファイルとhtmlファイルの内容です。↓
```typescript:members.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-members',
  templateUrl: './members.component.html',
  styleUrls: ['./members.component.css']
})
export class MembersComponent implements OnInit {

  members = [
    {name:'hoge',age:10,id:'10'},
    {name:'piyo',age:20,id:'11'},
    {name:'pico',age:30,id:'12'}
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

```
```typescript:members.component.html
<ul *ngFor="let member of members">
<li>
  <a routerLink="/detail/{{member.id}}">{{member.name}}</a>
</li>
</ul>


```
次に詳細ページです。
MemberDetailComponentを作成します。
tsファイルとhtmlファイルの内容です。↓
```typescript:member-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-member-detail',
  templateUrl: './member-detail.component.html',
  styleUrls: ['./member-detail.component.css']
})
export class MemberDetailComponent implements OnInit {

  id = +this.route.snapshot.paramMap.get('id');

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

  ngOnInit(): void {

  }

  goBack():void{
    this.location.back();
  }

}
```

```typescript:member-detail.component.html
<input type="text" value={{id}}>
<div>
  <button (click)="goBack()">戻る</button>
</div>
```

- ルーティングの設定を行います。
`routes`配列の中にページのURLとコンポーネント名を設定していきます。
```typescript:app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MembersComponent } from './members/members.component';
import { MemberDetailComponent } from './member-detail/member-detail.component';


const routes: Routes = [
  {path:'members', component: MembersComponent},
  {path:'detail/:id', component: MemberDetailComponent}

]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

```
- もう少しです！
あとは、ベースとなるapp.component.htmlにルーティングのタグを実装します。
`<router-outlet></router-outlet>`を書いてやります。

```typescript:app.component.html
<h1>テストページ</h1>
<router-outlet></router-outlet>
<app-footer></app-footer>
```

- トップページ
[http://localhost:4200/](http://localhost:4200/)
- 一覧ページ
[http://localhost:4200/members](http://localhost:4200/members)
![スクリーンショット 2022-05-30 23.53.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/f9d763a0-75c6-316d-f83e-6a594c66564b.png)

- 詳細ページ(※10はidです。)
[http://localhost:4200/detail/10](http://localhost:4200/detail/10)
![スクリーンショット 2022-05-30 23.53.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2689436/2da0f3aa-94d3-43d8-e974-c0dc0c96d8d4.png)

- 最後に[http://localhost:4200/](http://localhost:4200/)がリクエストされた際に一覧ページにリダイレクトするように変更しましょう。
`routes`配列に以下のオブジェクト要素を追加します。
`{path:'', redirectTo: '/members',pathMatch: 'full'},`
```typescript:app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MembersComponent } from './members/members.component';
import { MemberDetailComponent } from './member-detail/member-detail.component';


const routes: Routes = [
  {path:'', redirectTo: '/members',pathMatch: 'full'},
  {path:'members', component: MembersComponent},
  {path:'detail/:id', component: MemberDetailComponent}

]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

```

これで[http://localhost:4200/](http://localhost:4200/)がリクエストされると
[http://localhost:4200/members](http://localhost:4200/members)にリダイレクトされるようになりました。