753 views

本章では、angularでのルーティングを行う方法について記す。
ルーティングを行う上で、変更するコードは以下の3つである。
*
1. app.module.ts
2. app.component.html
3. URL遷移先のコンポーネント
*

app.module.tsではルーティングに関するモジュールのインポートについて記述する。
app.component.htmlでは、デフォルトではangularの紹介ページのようなHTMLが記述されているが、これを削除し、ページの入れ替えを行えるように変更する。
URLの遷移先となるコンポーネントをng generate componentで作成し、かつ、Routerのモジュールを取り込むように変更する。

app.module.tsの変更点

以下のコードの★印を追記する。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';★1

import { AppComponent } from './app.component';
import { BlasAuthComponent } from './blas-auth/blas-auth.component';
import { BlasHomeComponent } from './blas-home/blas-home.component';

const routes:Routes = [★2
  { path: 'login', component: BlasAuthComponent},★2
  { path: 'home', component: BlasHomeComponent}★2
];★2

@NgModule({
  declarations: [
    AppComponent,
    BlasAuthComponent,
    BlasHomeComponent,
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(routes)★3
  ],
  providers: [],
  bootstrap: [AppComponent]★4
})
export class AppModule { }

解説

★1でルーティングに関するモジュールをインポートする。

★2は、遷移先のURLを指定する。
http://localhost:4200/loginとブラウザでURLを指定した場合、BlasAuthComponentが呼び出されるという設定を行っている。
http://localhost:4200/homeを指定した場合は、BlasHomeComponentが呼び出される。

★3は人によってはハマる。
本や、別のサイトではRouterModuleだけを記述すれば動くとされているサイトがある。
本書はangular12を使用しているが、angular12の場合はforRootでルーティング先を渡す必要があるため注意。

★4 サイトのトップページにアクセスしたときに呼び出されるコンポーネント。デフォルトでは bootstrap: [AppComponent]となっており、変更の必要はないと思うが、別のコンポーネントに変更していた場合はAppComponentを指定する。

app.component.htmlの変更点

デフォルトではサンプルページのHTMLが書かれているが、ガスっと消して、以下に直す。

<div class="content">
  <router-outlet></router-outlet>
</div>

解説

このrouter-outletのタグが別のコンポーネントの表示と置き換わる仕掛けになっている。
もう、そういうものだということでそうする。

URL遷移先のコンポーネントの変更点

作成したコンポーネントのコンストラクタにrouterを取り込む。

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { RouterModule, Router } from '@angular/router';★1

@Component({
  selector: 'app-blas-auth',
  templateUrl: './blas-auth.component.html',
  styleUrls: ['./blas-auth.component.css']
})


export class BlasAuthComponent implements OnInit {

  message:string="";

  loginForm: FormGroup = new FormGroup({
    userName: new FormControl(''),
    password: new FormControl('')});


  constructor(private client: HttpClient, private router:Router) { } ★2

  ngOnInit(): void {

  }

  onSubmit() {
      this.router.navigate(['home']);★3
  }

}