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 { }

好了~

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