angular2+实现了模块化,组件化,所以如果一次加载所有模块,势必界面反应会比较慢,用户体验不好,所以实现模块的懒加载,单机路由的时候才加载相应的模块。
如果实际开发中,有一级菜单,二级菜单,那么一级菜单每个项目就可以作为一个模块。
1、定义一个懒加载的模块,现在app.module中配置路由
import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {FormsModule,ReactiveFormsModule} from "@angular/forms"; import {HttpModule} from "@angular/http"; import {AppComponent} from './app.component'; import {MyFormComponent} from './my-form/my-form.component'; import {MyHttpComponent} from './my-http/my-http.component'; import {HttpClientModule} from "@angular/common/http"; import * as _ from "lodash"; import {HTTP_INTERCEPTORS} from "@angular/common/http"; import { ButtonModule } from "primeng/primeng"; import {MyInterceptorService} from "./my-form/my-interceptor.service"; import {RouterModule,Routes} from "@angular/router"; import {OneModule} from "./one-module/one.module"; let routes: Routes = [ { path: "",redirectTo: "one",pathMatch: "full" },{ path: "one",loadChildren: "./one-module/one.module#OneModule" } ]; @NgModule({ declarations: [ AppComponent,MyFormComponent,MyHttpComponent ],imports: [ BrowserModule,FormsModule,ReactiveFormsModule,HttpModule,HttpClientModule,ButtonModule,OneModule,RouterModule.forRoot(routes) ],providers: [ // 导入拦截器 { provide: HTTP_INTERCEPTORS,useClass: MyInterceptorService,multi: true } ],bootstrap: [AppComponent] }) export class AppModule { }
2、one-module,懒加载模块中定义自己的路由,实现二级菜单。
import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {FormsModule,bootstrap: [AppComponent] }) export class AppModule { }
注意:
- app.module.ts中配置懒加载路由语法
let routes: Routes = [ { path: "",loadChildren: "./one-module/one.module#OneModule" } ];
2、记住要在app.module.ts中导入懒加载的模块
imports: [ BrowserModule,RouterModule.forRoot(routes) ]
3、添加路由
<router-outlet></router-outlet>
4、配置懒加载模块中的路由
// 子模块中的路由 let routes: Routes = [ { path: '',component: OneComponent } ];
懒加载模块中不需要再次引入import {BrowserModule} from '@angular/platform-browser';
原文链接:https://www.f2er.com/angularjs/144892.html