我总结了关于Angular的路由信息。

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

我們將使用模塊來設置Angular的路由配置。
可能是在app.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を使用する

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中，可以延迟加载模块。
这将减少初始加载的内容量，从而加快初始页面的加载速度。
从形象上来说，就像创建了另一个app.module和router的集合一样。
当然，输出的js文件（默认情况下可以在dist文件夹下找到）也会增加。

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]
})

之后我们来创建子模块吧。

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

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

这是子模块的路由设置。

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 {}