要使用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生成页面并设置路由和懒加载了。