はじめに
これまで、simpleformというプロジェクトに、「テンプレート駆動版足し算」「リアクティブ版の足し算」「FormBuilderを使ったコーヒーの登録」という3つのコンポーネントを作った。これらのうちどのコンポーネントを表示するのかは、app.component.htmlで切り替えていた。
今回は3つの機能の簡単なタブ式のメニューページを作る。それぞれのリンクにクリックすると、ページの下の部分がそれぞれのコンポーネントに切り替わる仕組みを作る。
URLとコンポーネントの関連付け
多くのWebアプリケーションでは、「/foo.html」というパスだと「foo.html」が「/bar.html」というパスだと「bar.html」が何々というように、URLのパスによってどのページが表示するのかを切り替えることができるが、Angularにもそれに似た機能がある。ただし、この設定はデフォルトで設定されるものではない。
たとえば「/controls」というパスでアクセスしたときに、「app-controls」に相当するコンポーネントが自動的に表示されるような機能はなく、開発者が明示的に設定する必要がある。URLと表示するコンポーネントを関連付ける方法「ルーティング」という。
新規モジュールの作成
リンクを作ったりするには、RouterModuleというモジュールを使ってプログラミングをする。
まず新規にモジュールを作成する。
ng g module app-routing –flat –module=app
オプション | 意味 |
–flat | モジュール名のフォルダ(この場合はapp-routing)を作らず、app/srcフォルダの直下にファイルを作成する |
–module=app | すでに存在するモジュールAppModuleと関連づける。このオプションを指定すると、AppModuleを定義しているapp.module.tsファイルに作成したクラスを読み込むための設定が追加される。 |
RoutingModuleを構成する
app-routing.module.tsファイル修正して、RoutingModuleを使うように構成していく。
import { NgModule, Component } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { RouterModule, Routes} from ‘@angular/router’;
import { SimpleFormComponent } from ‘./simple-form/simple-form.component’;
import { BetterFormComponent } from ‘./better-form/better-form.component’;
import { ControlsComponent } from ‘./controls/controls.component’;
const routes: Routes = [];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot([
{path:’simple-form’, component:SimpleFormComponent},
{path:’better-form’, component:BetterFormComponent},
{path:’controls’, component:ControlsComponent}
]
)
],
exports:[
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
①RoutingModuleのインポート
import { RouterModule, Routes} from ‘@angular/router’;
②URLパスとコンポーネントの関連付け定義
RouterModule.forRoot([
{path:’simple-form’, component:SimpleFormComponent},
{path:’better-form’, component:BetterFormComponent},
{path:’controls’, component:ControlsComponent}
]
)
③エクスポートする
export class AppRoutingModule { }
コンポーネントを切り替えるリンクや表示場所を定義する
<nav>
<a routerLink=”.simple-form”>Simple Form</a> |
<a routerLink=”.better-form”>Better Form</a> |
<a routerLink=”.controls”>Controls</a>
</nav>
<div><router-outlet></router-outlet></div>
①リンクの構成
RouterModuleで定義したリンクを構成するには、「routerLink属性」で指定する。
<a routerLink=”.simple-form”>Simple Form</a> |
ここで定義している「simple-form」は、先ほどRouterModuleで定義した、次のpathに相当するものである。
{path:’simple-form’, component:SimpleFormComponent},
②コンポーネントを表示する場所の定義
<div><router-outlet></router-outlet></div>
タブらしい表示にする
タブらしく表示する為にCSSでスタイルを定義していく。現在選択されているところは色を変える仕様とする。
全体のCSS
body{
margin-top: 50px;
margin-left: 50px;
}
div{
margin-top: 10px;
}
app.component.css
a {
padding: 10px;
margin-right: 4px;
background-color: darkolivegreen;
color: khaki;
text-decoration: none;
}
a:link, a:visited, a:hover {
color: khaki;
}
a.selected-item {
color:darkolivegreen;
background-color: khaki
}
div {
padding: 50px;
background-color: khaki;
color: darkolivegreen;
}
リンクが選択中の時にクラスを出力するように構成する
選択中のリンクの場合に、「class=selected-item」と出力するには、リンクにrouterLinkActiveという属性を指定する。次のように「routerLinkActive=”selected-tem”」と記せば、選択されたときに「class=”selected-item」という出力がされ、先に定義したselected-itemのCSSが適用される。
<nav>
<a routerLink=”./simple-form” routerLinkActive = “selected-item”>Simple Form</a> |
<a routerLink=”./better-form” routerLinkActive = “selected-item”>Better Form</a> |
<a routerLink=”./controls” routerLinkActive = “selected-item”>Controls</a>
</nav>
<div><router-outlet></router-outlet></div>
ドキュメントルートをリダイレクトする
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { RouterModule, Routes} from ‘@angular/router’;
import { SimpleFormComponent } from ‘./simple-form/simple-form.component’;
import { BetterFormComponent } from ‘./better-form/better-form.component’;
import { ControlsComponent } from ‘./controls/controls.component’;
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot([
{path:”, redirectTo: ‘/simple-form’, pathMatch: ‘full’},
{path:’simple-form’, component:SimpleFormComponent},
{path:’better-form’, component:BetterFormComponent},
{path:’controls’, component:ControlsComponent}
]
)
],
exports:[
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
終わりに
今回は3つの機能のルーティングによるパスの関連付けを行い、簡単なタブ式のメニューページを作り、ドキュメントルートのリダイレクトを行った。そして、それぞれのリンクにクリックすると、ページの下の部分がそれぞれのコンポーネントに切り替わる仕組みを作り、CSSを定義しタブらしい表示を記述した。
コメント