Edited at

angular(7)のルーティングについて


angularのルーティングについてまとめました。


  • 内容はangular6でも変わりません。

モジュールでAngularのルーティング設定を行います。

おそらくapp.module.tsの中ではなく、route.module.tsを作成してルーティングの設定。


route.module.ts

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

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

// ここにパスの定義をかく
const routes: Routes = [
// cliとかで入れるとデフォルトでトップにリダイレクトされる処理がここある
// { path: '', redirectTo: '/top', pathMatch: 'full' },
// リダイレクトしなくても良いなら、Componentを指定
{ path: '', component: TopComponent, pathMatch: 'full' },

// 最後に上記のパスに当てはまらない場合のコンポーネントを指定。「Pagenotfound」を表示
{ path: '**', component: PageNotFoundComponent }
]

@NgModule({
imports: [RouterModule.forRoot(routes, {
// ルーターの設定で、スクロール位置の復元をオンに
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
})],
exports: [RouterModule]
})



子モジュールでルーティンを階層にする



  • childrenを使用する


route.module.ts

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

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

// ここにパスの定義をかく
const routes: Routes = [
{ path: '', component: TopComponent, pathMatch: 'full' },
//階層にしたいパス
{ path: 'articles',
// 「articles/」という URL になる
children: [
//「articles/edit」
{ path: 'edit', component: EditComponent },
]
},
// 最後に上記のパスに当てはまらない場合のコンポーネントを指定。「Pagenotfound」を表示
{ path: '**', component: PageNotFoundComponent }
]

@NgModule({
imports: [RouterModule.forRoot(routes, {
// ルーターの設定で、スクロール位置の復元をオンに
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
})],
exports: [RouterModule]
})



ここで遅延読み込みについて

angularではModuleの遅延読込みが可能です。

これにより最初に読込むコンテンツの量を減るので、初期ページの読み込みの高速化します。

イメージ的には、もう一つapp.modulerouterのセットを作ってしまう感じです。

もちろん出力されるjsファイル(デフォルトだとdist以下のフォルダにできる)も増えます。


route.module.ts

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

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

// ここにパスの定義をかく
const routes: Routes = [
{ path: '', component: TopComponent, pathMatch: 'full' },
//遅延読込みしたいところ!!!!!!
{ path: 'sub',
// 「sub/」という URL になる
// loadChildren:を使い、右辺に対象のmoduleまでのpathを記載
loadChildren:'./sub/sub.module#SubModule' }
},
// 最後に上記のパスに当てはまらない場合のコンポーネントを指定。「Pagenotfound」を表示
{ path: '**', component: PageNotFoundComponent }
]

@NgModule({
imports: [RouterModule.forRoot(routes, {
// ルーターの設定で、スクロール位置の復元をオンに
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
})],
exports: [RouterModule]
})


あとはsub-moduleを作りましょう。


sub-module.ts

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

import { SubRouteModule } from './sub-route.module';
import { SubPageComponent } from 'ページまでのパス';

@NgModule({
imports: [
// このmodule用のルーティングをインポート
SubRouteModule
],
declarations: [SubPageComponent]
})
export class SubModule { }


こちらはsub-moduleのルーティング


sub-route.module.ts

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

import { Routes, RouterModule } from '@angular/router';
import { SubPageComponent } from 'ページまでのパス';

//普通のルーティングと同様に切ってよい
const routes: Routes = [
{
path: '',
component: SubPageComponent
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})

export class SubRouteModule {}