在Angular中实现动态标签页与延迟加载模块可以通过以下步骤:
ng new dynamic-tabs
ng generate component tabs
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-tabs',
templateUrl: './tabs.component.html',
styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {
tabs = [
{ title: 'Tab 1', component: Tab1Component },
{ title: 'Tab 2', component: Tab2Component },
{ title: 'Tab 3', component: Tab3Component }
];
selectedTab = 0;
constructor() { }
ngOnInit(): void {
}
selectTab(index: number): void {
this.selectedTab = index;
}
}
ng generate module tab1 --route tab1 --module app.module
ng generate module tab2 --route tab2 --module app.module
ng generate module tab3 --route tab3 --module app.module
loadChildren
属性设置为对应的模块路径:const routes: Routes = [
{ path: '', redirectTo: '/tabs', pathMatch: 'full' },
{ path: 'tabs', component: TabsComponent },
{ path: 'tab1', loadChildren: () => import('./tab1/tab1.module').then(m => m.Tab1Module) },
{ path: 'tab2', loadChildren: () => import('./tab2/tab2.module').then(m => m.Tab2Module) },
{ path: 'tab3', loadChildren: () => import('./tab3/tab3.module').then(m => m.Tab3Module) }
];
const routes: Routes = [
{ path: '', component: Tab1Component }
];
这样就实现了在Angular中的动态标签页与延迟加载模块的解决方案。
下一篇:Angular中的动态标题