要使用Angular CLI生成页面并设置路由和懒加载,可以按照以下步骤进行操作:
npm install -g @angular/cli
ng generate component page-name
这将生成一个名为page-name的新页面组件,并在src/app目录下创建相关文件。
page-name-routing.module.ts)中,导入RouterModule和NgModule模块,并定义页面的路由。示例如下:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNameComponent } from './page-name.component';
const routes: Routes = [
{
path: '',
component: PageNameComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageNameRoutingModule { }
在这个示例中,我们定义了一个空路径'',并将其关联到PageNameComponent组件。
app-routing.module.ts),导入RouterModule和Routes模块,并定义页面的懒加载路由。示例如下:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'page',
loadChildren: () => import('./page-name/page-name.module').then(m => m.PageNameModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在这个示例中,我们定义了一个名为page的路径,并使用loadChildren属性指定了页面组件的懒加载模块PageNameModule。
app.module.ts)中导入和添加PageNameRoutingModule和RouterModule模块。示例如下:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { PageNameRoutingModule } from './page-name/page-name-routing.module';
import { PageNameComponent } from './page-name/page-name.component';
@NgModule({
declarations: [
PageNameComponent
],
imports: [
BrowserModule,
AppRoutingModule,
PageNameRoutingModule,
RouterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在这个示例中,我们导入了PageNameRoutingModule和RouterModule模块,并将它们添加到imports数组中。
完成以上步骤后,你就可以使用Angular CLI生成页面并设置路由和懒加载了。