angular8路由懒加载
在angular中路由即能加载组件又能加载模块，而我们说的懒加载实际上就是加载模块，目前还没有看到懒加载组件的例子。
加载组件使用的是component关键字
加载模块则是使用loadChildren关键字
例子代码
- 父模块路由文件
import {
NgModule } from '@angular/core';
import {
Routes, RouterModule } from '@angular/router';
import {
HomeComponent } from './components/home/home.component';
const routes: Routes = [
{
path: 'home',
component: HomeComponent
},
//当前版本有两种写法
{
path: 'dynamic',
loadChildren: './modules/dynamic/dynamic.module#DynamicModule'
// loadChildren: () => import('./modules/dynamic/dynamic.module').then( m => m.DynamicModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
- 子模块Module文件
import {
NgModule } from '@angular/core';
import {
CommonModule } from '@angular/common';
import {
DynamicRoutingModule } from './dynamic-routing.module';
import {
DynamicComponent } from './dynamic.component';
import {
Tab1Component } from './tab1/tab1.component';
import {
Tab2Component } from './tab2/tab2.component';
import {
Tab3Component } from './tab3/tab3.component';
import {
DynamicDirective } from './dynamic.directive';
@NgModule({
declarations: [DynamicComponent, Tab1Component, Tab2Component, Tab3Component, DynamicDirective],
imports: [
CommonModule,
DynamicRoutingModule
],
entryComponents: [Tab1Component, Tab2Component, Tab3Component]
})
export class DynamicModule {
}
- 子模块路由文件
import {
NgModule } from '@angular/core';
import {
Routes, RouterModule } from '@angular/router';
import {
DynamicComponent } from './dynamic.component';
const routes: Routes = [
{
path: '',
component: DynamicComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DynamicRoutingModule {
}
注意事项
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/185279.html原文链接：https://javaforall.net
