要将懒加载模块加载到选项卡中,您需要使用Angular的路由功能和Angular Material的选项卡组件。以下是一个示例解决方案:
首先,确保您已经安装了Angular和Angular Material,并在您的项目中导入它们。
lazy.module.ts
。这个模块将包含您要懒加载的组件。import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';
@NgModule({
declarations: [LazyComponent],
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: LazyComponent }
])
]
})
export class LazyModule { }
tabs.component.ts
。这个组件将包含选项卡,并在选项卡中加载懒加载模块。import { Component } from '@angular/core';
@Component({
selector: 'app-tabs',
template: `
`
})
export class TabsComponent { }
app-routing.module.ts
文件中。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsComponent } from './tabs.component';
const routes: Routes = [
{ path: '', redirectTo: '/tabs', pathMatch: 'full' },
{ path: 'tabs', component: TabsComponent },
{ path: 'lazy', loadChildren: () => import('./lazy.module').then(m => m.LazyModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: ' ',
})
export class AppComponent { }
/tabs
路由,您将看到一个选项卡,其中一个选项卡名称为"Lazy Tab"。当您点击这个选项卡时,懒加载模块将被加载并在选项卡中显示。这就是将懒加载模块加载到选项卡中的解决方案。希望对您有所帮助!