【Angular】RouterModuleによる画面遷移

2021年12月11日

Angularで作るWebアプリに画面遷移を実装していきます。
画面遷移とは言いますが、一般的にあるような別のHTMLファイルを表示する感じではないです。
Angularでは、コンポーネントで設定されている画面を、メインとなるHTMLファイルに読み込んで表示するというように画面を表示しているのですが、
この読み込むコンポーネントを切り替えることで画面遷移を実施していきます。

スポンサーリンク

RouterModuleを読み込む

今回はRouterModuleというモジュールを使って画面遷移を実施していきますので、まずはこのモジュールをインポートしていきます。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { RingoComponent } from './ringo/ringo.component';
import { AppleComponent} from './apple/apple.component';
import { HomeComponent } from './home/home.component';
const route:Routes = [
  {path: 'ringo', component:RingoComponent},
  {path: 'apple', component:AppleComponent},
];

@NgModule({
  declarations: [
    AppComponent,
    RingoComponent,
    AppleComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(
      route
    )
  ],
  providers: [],
  bootstrap: [HomeComponent]
})
export class AppModule { }

こちらがapp.module.tsを修正したものになります。
まずRouterModuleをインポートしましょう。

import { RouterModule, Routes } from '@angular/router’;

次にルートの中身を定義していきましょう。

const route:Routes = [
  {path: 'ringo’, component:RingoComponent},
  {path: 'apple’, component:AppleComponent},
];

ここでRoutes型の変数を用意します。
{path: ○○, component:○○○○}という形で定義していき、pathがその画面を表示するときのアドレスになります。トップ画面のURLにパスで指定した値を足したものが、この画面のURLになります。
componentで設定したものが、表示するコンポーネントになります。
つまりこの場合、「(このWebアプリのURL)/ringo」 というアドレスにアクセスすると、RingoComponentの画面が表示されるようになります。

次にNgModuleデコレータにRouterModuleをインポートします。

RouterModule.forRoot(
  route
)

先ほど作ったRoutesを引数として、RouterModule.forRootメソッドを実行し、その返り値をインポートします。

bootstrap: [HomeComponent]

ブートストラップで定義しているように、トップページとしては「HomeComponent」を表示します。

各コンポーネントの設定

では、次にこのHomeComponentを見ていきましょう。
こちらがHomeComponentのHTMLファイルになります。

<nav>
    <a routerLink="">Home</a>|
    <a routerLink="ringo">Rigo</a>|
    <a routerLink="apple">Apple</a>
</nav>
<div>
    <router-outlet></router-outlet>
</div>

次にCSSファイルもお見せいたします。

nav{
    background-color: lightgreen;
    color: black;
    padding: 5px;
}

<nav>タグの中身で、画面に表示する画面遷移用のリンクを作成しております。
<a>タグの中身にあるように、routerLinkという属性にアドレスを設定することで、そこへのリンクとなります。
余談ですが、CSSファイルの方に書いているように、背景色を変えることで少しリンクっぽい感じにしました。

リンクの下に<router-outlet>タグというものがありますが、
RouterModuleを使って画面に表示するコンポーネントを切り替えていくとき、このタグの中に切り替えた先のコンポーネントの内容を表示することになります。
つまりこのタグの上にある<nav>タグのリンクは、どの画面に遷移しても常に表示されることになります。

ちなみに画面遷移先として用意しているAppleComponent、RingoComponentの中身ですが、それぞれのHTMLファイルをお見せいたします。

<p>AppleComponentの画面です。</p>
<p>RingoComponentの画面です。</p>

特にCSSやTSファイルの中身は記載していません。
これらの文言を表示するだけのコンポーネントとなっております。

実際の画面表示

まずトップ画面を表示します。

次にここで「Ringo」を押下してみます。

RingoComponentに設定していたメッセージが表示されましたね。
上で説明していたようにリンクの部分は残ったままになっています。
次に「Apple」を押下してみます。

AppleComponentが表示されました。

補足:スクリプトに画面遷移を定義する

例えば、ボタンを押下したときにそのイベントで実行されるメソッドの中で何かしらの処理を行った後に画面遷移をしたい、というときもあると思います。
そんなときのためにスクリプトに画面遷移を定義する方法を紹介します。
まず、ボタンを用意するためにHTMLファイルをこのように修正してみます。

<nav>
    <a routerLink="">Home</a>|
    <a routerLink="ringo">Rigo</a>|
    <a routerLink="apple">Apple</a>|
    <button (click)="onClick()">スクリプトでRingoComponentに移動</button>
</nav>
<div>
    <router-outlet></router-outlet>
</div>

この新規に作ったボタンを押下したときの処理を記載していきます。
TSファイルの中身をこのように修正します。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

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

  constructor(private router:Router) { }

  ngOnInit(): void {
  }

  onClick():void {
    this.router.navigate(["ringo"]);
  }

}

まずRouterというクラスをインポートしてきます。

import { Router } from '@angular/router’;

そしてボタンを押下したときに実行されるメソッドの中でRouterのnavigateメソッドというものを使っていきます。
このメソッドの引数に遷移先のアドレスを記載します。
この場合、RingoComponentに移動するように記載しております。
もしボタンを押下したときに何かしらの処理を行ってから画面遷移をする場合、それについてコードを書いて最後にこのnavigateメソッドを記載する感じになります。

onClick():void {

  this.router.navigate([“ringo"]);

}

では実際に画面から確認してみましょう。
まずこちらが初期表示画面になります。

新規作成したボタンが出来ていますね、こちらを押下してみるとこうなります。

RingoComponentに移動していることが確認できました。

終わりに

今回、画面遷移のやり方について紹介してきました。
ちなみに画面遷移先として新規にコンポーネントを追加する場合は、この記事(こちら)を参考にしてみてください。

スポンサーリンク

Angular開発

Posted by 社畜林檎