ng-alain创建组件添加路由导航菜单项基础步骤详解
首先呢~
我们要在需要创建模块的路径例如AAA目录下,在终端打开(就是和在shell窗口打开一样的)
然后
ng g ng-alain:module XXXmodule
好了,创建了一个模块
接下来会提示你
CREATE src/app/routes/AAA/XXXmodule-routing.module.ts (261 bytes)
CREATE src/app/routes/AAA/XXXmodule.module.ts (458 bytes)
这下成了,模块已经创建成功~
第二步
注册模块到路由主模块~
打开这个文件
xxxx项目\src\app\routes\AAA\routes-routing.module.ts
然后找到
const routes: Routes = [
{
path: '',
component: LayoutDefaultComponent,
canActivate: [SimpleGuard],
canActivateChild: [SimpleGuard],
children: [
{
path: '',
loadChildren: './AAA/XXXmodule.module#XXXModule' } ] }]
第三步来啦~
我们开始创建组件
我们要在需要创建模块的路径下例如AAA目录,在终端打开(就是和在shell窗口打开一样的)
执行
ng g c XXXcomponent
然后会出现
PS XXX\src\app\routes\AAA> npx ng g c wip-unlock
CREATE src/app/routes/AAA/XXXcomponent.component.html (25 bytes)
CREATE src/app/routes/AAA/XXXcomponent.component.ts (253 bytes)
UPDATE src/app/routes/AAA/XXXmodule.module.ts (642 bytes)
组件已经创建成功啦~
第四步,
我们把组件加入路由
打开创建的那个模块的 路由文件
例如
XXXmodule-routing.module.ts
我们把组件引入,加入路由,
例如
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {XXXcomponent} from './XXXcomponent.component';
const routes: Routes = [
// 菜单1
{ path: 'AA/XXX', component: xxxComponent }
];
@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] })
export class XXXmoduleRoutingModule { }
好了~
然后就可以在页面看到我们最新添加的啦~~