angular #6

ページの割り当て、ルーティングについて

コンポーネント側のコード

ページの割り当てについては「AppRoutingModule」を使用する。
実装は以下の通り。

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

import { BetterFromComponent } from './better-from/better-from.component';
import { TemplateFromComponent } from './template-from/template-from.component';
import { ControlsComponent } from './controls/controls.component';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot([
    {path:'BetterFrom', component:BetterFromComponent},
    {path:'TemplateFrom', component:TemplateFromComponent},
    {path:'ControlsForm', component:ControlsComponent}]
    )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

「RouterModule.forRoot」を使用して作成したModuleへリンクを張るような仕組みとなっている。
path＝URLのパス
component＝関連付けるコンポーネントのパス
上記の設定を行うことによってリンクを張ることが可能となる。

テンプレート側のコード

コンポーネント側で設定したものをコンポーネント側で使用する。
実装は以下の通り。とりあえず単純なリンク。

<nav>
    <a routerLink="./BetterFrom">BetterFrom</a> |
    <a routerLink="./TemplateFrom">TemplateFrom</a> |
    <a routerLink="./ControlsForm">ControlsForm</a>
</nav>
<div><router-outlet></router-outlet></div>

navタグはとaタグは通常の使用方法
「router-outlet」については以下の通り。

・<router-outlet> タグは RouterOutlet で提供されているセレクタ
・routerLink は RouterLink から提供されているセレクタ
・<router-outlet>タグは セットした領域に routerLinkに指定したコンポーネントのテンプレート内容が表示される

上記の通り「RouterModule」を使用してページの遷移ができるようだ。