ng-alain创建组件添加路由导航菜单项基础步骤详解

Posted 2021-02-21 sugartang

首先呢~ 

 我们要在需要创建模块的路径例如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项目srcapp outesAAA outes-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 XXXsrcapp
outesAAA> 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 { }

好了~

然后就可以在页面看到我们最新添加的啦~~