AngularX 路由最佳實踐

前端元件化之後，就牽扯到元件的路由問題，那我們希望一個比較完美的實作是這樣的：主子產品管理到各個子子產品的路由資訊，子子產品管理自己的路由資訊，子子產品在被通路到的時候再加載。

下面看一下angularx是怎麼實作這個思路的。

首先在主子產品定義到子子產品的路由資訊，設定子子產品的懶加載用loadChildren配置。如下：

@NgModule({
    imports: [
        RouterModule.forRoot([
            {path: '', component: HomePageComponent},
            {path: 'forms', loadChildren: "app/forms/forms.module#FormsModule"}
        ])
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {}      

子子產品管理子子產品的路由資訊：

@NgModule({
  imports: [
    RouterModule.forChild([
      {path:'',component: FormsComponent},
      children:[
        {path:'checkbox',component: CheckBoxComponent},
        {path:'input',component: InputComponent}
      ]
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class FormsRoutingModule {}