ルーティングの基本的な設定

ここでは、簡単な例を示しながら、Angular ルーティングの基本的な設定を行いましょう。

サンプルの動作。リンクをクリックしたら色が変わるだけ

サンプルプログラムは次のような動きをします。

画面の上部にリンクが設定されており、デフォルトでは何も選択されていません。リンクの色がどれも同じ灰色です。

色の部分はそれぞれのコンポーネントで切り替わっている

ボディー部は青色のコンポーネント (BlueComponent) が表示されています。

BLUE / RED / YELLOW というリンク (ボタン) を押すと、押したリンクボタンが選択された状態になり、ボディー部はボタンの名前に応じたコンポーネントが表示されます。

青色部分は下に示す BlueComponent、赤色部分は RedComponent、黄色部分は YellowComponent です。

BlueComponent (src/app/blue.component.ts) :

import {Component} from '@angular/core';

@Component({
  template: `<div class='blue'>BLUE</div>`,
  styles: [`
    .blue {
      font-family: sans-serif;
      padding: 1em;
      color: white;
      background-color: blue;
    }`]
})
export class BlueComponent {
}

RedComponent (src/app/red.component.ts) :

import {Component} from '@angular/core';

@Component({
  template: `<div class='red'>RED</div>`,
  styles: [`
    .red {
      font-family: sans-serif;
      padding: 1em;
      color: white;
      background-color: red;
    }`]
})
export class RedComponent {
}

YellowComponent (src/app/yellow.component.ts):

import {Component} from '@angular/core';

@Component({
  template: `<div class='yellow'>YELLOW</div>`,
  styles: [ `
    .yellow {
      font-family: sans-serif;
      padding: 1em;
      color: black;
      background-color: yellow;
    }` ]
})
export class YellowComponent {
}

それぞれ、色が違うだけで中身は空っぽで特別なことはありません。

しかし、これまでと違うのは下でルーティングを設定するので、セレクターは不要になります。

これらを AppComponent にリンクを設置します。

AppComponent のコードは空っぽです。

import { Component } from '@angular/core';

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

リンクの指定方法

テンプレート src/app/app.component.html は次の通り。いよいよ、今回のポイントがでてきました。

<p class="mynav"><a routerLink="blue" routerLinkActive="myactive">Blue</a>
  <a routerLink="red" routerLinkActive="myactive">Red</a>
  <a routerLink="yellow" routerLinkActive="myactive">Yellow</a></p>

<router-outlet></router-outlet>

a タグに routerLink が設定されています。この設定を Angular のルーティングシステムが受け取り、必要なコンポーネントをロードします。

コンポーネントをロードする場所は router-outlet タグで指定します。

routerLinkActive で指定するのは、リンクがアクティブになったときに有効になる CSS クラス名です。ここでは myactive というクラス名が指定されていますので、リンクをクリックすると、クリックしたリンクの myactive という CSS クラスが有効になります。

CSS は次の通り。

p.mynav a {
  color: #000;
  font-family: sans-serif;
  display: inline-block;
  background-color: #eee;
  border-radius: 3px;
  padding: 0.5em 1em;
  text-decoration: none;
}

p.mynav a.myactive {
  color: #fff;
  font-weight: bold;
  background-color: #999;
}

クリックしたボタンの色が変わるのは、ここで myactive クラスをそのように指定しているからです。

ルーティングの設定

ルーティングを設定するために、AppRoutingModule (src/app/app-routing.module.ts) というファイルを新規に作成しましょう。

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

import { BlueComponent } from './blue.component';
import { RedComponent } from './red.component';
import { YellowComponent } from './yellow.component';

const routes: Routes = [
  {path: 'red', component:RedComponent},
  {path: 'yellow', component:YellowComponent},
  {path: '**', component:BlueComponent},
];

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

コード内の routes の設定で、パスとコンポーネントの対応付けをしています。

routes のタプル内で URL のパスが一致したところで、それに該当するコンポーネントが読み込まれます。

どれにも一致しない場合は ** というワイルドカードで指定したコンポーネントが読み込まれます。（このため、上記ではデフォルトで BlueComponent が読み込まれていました)

ルートモジュールに上記のルーティング用のモジュールを取り込むことで、Angular に認識されるようになります。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { BlueComponent } from './blue.component';
import { RedComponent } from './red.component';
import { YellowComponent } from './yellow.component';

@NgModule({
  declarations: [
    AppComponent,
    BlueComponent,
    RedComponent,
    YellowComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

以上で、基本的なルーティングの設定方法について説明しました。

ホーム » Angular の基礎