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

今回はルーティングの設定、一覧ページから詳細ページに遷移できるように実装していきます。
また、http://localhost:4200/がリクエストされた場合は、リダイレクトを行って、別ページに遷移するようにしてみます。

• ひとまず、ルーティングに使用するコンポーネントを新規作成しましょう。
  MembersComponentを作成します。
  tsファイルとhtmlファイルの内容です。↓

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 {
  }

}

members.component.html

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

次に詳細ページです。
MemberDetailComponentを作成します。
tsファイルとhtmlファイルの内容です。↓

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();
  }

}

member-detail.component.html

<input type="text" value={{id}}>
<div>
  <button (click)="goBack()">戻る</button>
</div>

• ルーティングの設定を行います。
  routes配列の中にページのURLとコンポーネント名を設定していきます。

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>を書いてやります。

app.component.html

<h1>テストページ</h1>
<router-outlet></router-outlet>
<app-footer></app-footer>

• トップページ
  http://localhost:4200/

• 一覧ページ
  http://localhost:4200/members
  

• 詳細ページ(※10はidです。)
  http://localhost:4200/detail/10
  

• 最後にhttp://localhost:4200/がリクエストされた際に一覧ページにリダイレクトするように変更しましょう。
  routes配列に以下のオブジェクト要素を追加します。
  {path:'', redirectTo: '/members',pathMatch: 'full'},

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/membersにリダイレクトされるようになりました。