anguar4 模块懒加载

前端之家收集整理的这篇文章主要介绍了anguar4 模块懒加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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 {
}

注意:

  1. 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

猜你在找的Angularjs相关文章