Angular23 loading组件、路由配置、子路由配置、路由懒加载配置

 

1 需求

　　由于Angular是单页面的应用，所以在进行数据刷新是进行的局部刷新；在进行数据刷新时从浏览器发出请求到后台响应数据是有时间延迟的，所以在这段时间就需要进行遮罩处理来提示用户系统正在请求数据。

 

2 loading组件简介

　　loading组件就是专门负责遮罩处理的，可以自定一个loading组件，也可以使用别人创建号的loading模块；loading组件生效后的效果如下：

　　参考资料：点击前往

　　　　

 

3 编程步骤

　　3.1 创建一个angular项目

　　　　技巧01：版本必须是angular4及以上

　　3.2 创建一个组件

　　3.3 创建一个user模块

　　　　技巧01：在user模块中创建多个组件

　　3.4 路由配置

　　　　技巧01：每个模块单独设置路由配置文件

　　　　技巧02：利用路由实现模块懒加载

　　　　3.4.1 子模块路由配置文件

　　　　　　技巧01：子模块配置类中需要使用 forCild

　　　　　　　　

　　　　　　技巧02：子模块的配置文件配置好后需要在子模块中引入配置文件，直接引入配置模块中的那个类就行啦

　　　　　　　　

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';
import { UserHomeComponent } from './user-home/user-home.component';
import { UserInfoComponent } from './user-info/user-info.component';

const routes: Routes = [
  {
    path:'',
    component:UserHomeComponent,
    children: [
        {
            path:'',
            redirectTo:'userList',
            pathMatch:'full'
        },
        {
            path:'userList',
            component:UserListComponent
        },
        {
            path:'userInfo',
            component:UserInfoComponent
        }
    ]
}
];

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

user.routing.module.ts