angular7中自定义模块实现路由的懒加载

创建带路由的模块

• ng g module modules/user --routing 创建带路由的自定义模块user

• ng g c modules/user 创建自定义路由user的根组件

配置路由

user-routing.module.ts

import { UserComponent } from './user.component';

const routes: Routes = [
    {
        path: '',
        component: UserComponent
    }
];

app.component.html

<a [routerLink]="[ '/user' ]">用户模块</a>
<a [routerLink]="[ '/article' ]">文章模块</a>
<a [routerLink]="[ '/product' ]">商品模块</a>

<hr>

<router-outlet></router-outlet>

app-routing.module.ts

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

const routes: Routes = [
    {
        path: 'user', loadChildren: './modules/user/user.module#UserModule'
    },
    {
        path: 'article', loadChildren: './modules/article/article.module#ArticleModule'
    },
    {
        path: 'product', loadChildren: './modules/product/product.module#ProductModule'
    }
];

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

子模块中配置子路由

user.component.html

<a [routerLink]="[ '/user/profile' ]">子路由profile</a>
<a [routerLink]="[ '/user/address' ]">子路由address</a>

<router-outlet></router-outlet>

user-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user.component';
import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';

const routes: Routes = [
    {
        path: '',
        component: UserComponent,
        children: [
            {
                path: 'profile',
                component: ProfileComponent
            },
            {
                path: 'address',
                component: AddressComponent
            },
            {
                path: '**',
                redirectTo: 'profile'
            }
        ]
    }
];

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