1、目录结构,实现懒加载,延迟加载模块。
2、app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RootRoutes } from "./routes";
import { AppComponent } from './app.component';
import { RouterModule } from "@angular/router";
// 来加载模块
import { OperateModule } from "./children/operate.module";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(RootRoutes, {
useHash: true
}),
OperateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2、路由文件 route.ts
import {Routes} from "@angular/router";
export const RootRoutes: Routes = [
{
path: "",
loadChildren: "./children/operate.module.ts#OperateModule"
},
{
path: "operate",
loadChildren: "./children/operate.module.ts#OperateModule"
}
];
3、app.component.html
<router-outlet></router-outlet>
4、懒加载模块 children目录下的文件
operation.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OperateComponent } from './operate.component';
import { RouterModule, Routes } from "@angular/router";
const route: Routes = [
{
path: "",
component: OperateComponent
}
]
@NgModule({
declarations: [
OperateComponent
],
imports: [
RouterModule.forChild(route)
],
providers: [],
bootstrap: []
})
export class OperateModule { }
5、operation.component.ts
import {Component} from "@angular/core";
@Component({
selector: "app-operate",
templateUrl: "./operate.component.html"
})
export class OperateComponent {
}
6、operation.component.html
opertion html懒加载模块
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。