Angular自定义模块-进阶-懒加载 - 《Angular 学习笔记》

实例在angularlazyload：
创建自定义模块，根据需要让根模块与不同的子模块动态的绑定—-懒加载

/*

创建带路由的模块：ng g module module/user —routing
创建同名组件： ng g component module/user
在子模块中配置路径，配置前先import对应组件 ```typescript import { NgModule } from ‘@angular/core’; import { RouterModule, Routes } from ‘@angular/router’;

import { UserComponent } from ‘./user.component’;//引入组件

const routes: Routes = [ {path:’’,component:UserComponent}//配置路径 ];

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


4. 在需要调用的html页面添加routerLink，router-outlet标签：
```html
<header>
  <a [routerLink]="[ '/user' ]" >user下的用户模块</a>
  <a [routerLink]="[ '/product' ]" >product下的商品模块</a>
  <a [routerLink]="[ '/article' ]" >article下的文章模块</a>
</header>
<router-outlet></router-outlet>

在根路由中进行配置： ```typescript import { NgModule } from ‘@angular/core’; import { RouterModule, Routes } from ‘@angular/router’;

// const routes: Routes = [ // {//配置根路由，实现路由懒加载，不需要import // path:’user’,loadChildren:’./module/user/user.module#UserModule’ // }, // {//配置根路由，实现路由懒加载，不需要import // path:’article’,loadChildren:’./module/article/article.module#ArticleModule’ // }, // {//配置根路由，实现路由懒加载，不需要import // path:’product’,loadChildren:’./module/product/product.module#ProductModule’ // },

// ];

const routes: Routes = [ {

path:'user',loadChildren:()=>import('./module/user/user.module').then(mod=>mod.UserModule)

}, {

path:'article',loadChildren:()=>import('./module/article/article.module').then(mod=>mod.ArticleModule)

}, {

path:'product',loadChildren:()=>import('./module/product/product.module').then(mod=>mod.ProductModule)

{path:’**’,redirectTo:’user’}

];

@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }


注意：配置根路由时有些版本不兼容，可能导致Error：Cannot find module，可将：<br />path:'user',loadChildren:'./module/user/user.module#UserModule'   改为：<br />path:'user',loadChildren:()=>import('./module/user/user.module').then(mod=>mod.UserModule)  即可！<br />*/
/*  显示子模块中的子组件的页面：访问 [http://localhost:4200/user/address](http://localhost:4200/user/address)   时显示address中的内容<br />第一种形式：在上面的基础上，直接在子模块的路由中配置路径，这样配置时直接将子模块（user）中的子组件（ProfileComponent）挂载到根路由（app-routing）上了。
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';
import { UserComponent } from './user.component';//引入组件
const routes: Routes = [
  { /*
    这样配置时是在子模块的路由中配置路径时形成父子路由关系，此时子组件是挂载到子路由（user-routing）的，需要在路由中添加：
    <router-outlet></router-outlet>标签
    */
    path:'',component:UserComponent,
      children:[
        {path:'profile',component:ProfileComponent},
      ]
  },
  //这样配置时直接将子模块（user）中的子组件（ProfileComponent）挂载到根路由（app-routing）上了。
  {path:'address',component:AddressComponent}
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

第二种形式：在上面的基础上，在子模块的路由中配置路径时形成父子路由关系，此时子组件是挂载到子路由（user-routing）的，想要访问http://localhost:4200/user/profile的内容需要在子路由中添加：
标签，并且此时会将profile与user的内容一同展示。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';
import { UserComponent } from './user.component';//引入组件
const routes: Routes = [
  { /*
    这样配置时是在子模块的路由中配置路径时形成父子路由关系，此时子组件是挂载到子路由（user-routing）的，需要在路由中添加：
    <router-outlet></router-outlet>标签
    */
    path:'',component:UserComponent,
      children:[
        {path:'profile',component:ProfileComponent},
      ]
  },
  //这样配置时直接将子模块（user）中的子组件（ProfileComponent）挂载到根路由（app-routing）上了。
  {path:'address',component:AddressComponent}
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }