码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-28 00:26:53      阅读:391      评论:0      收藏:0      [点我收藏+]

标签:imp   size   can   ORC   nbsp   shell   you   菜单   提示   

首先呢~ 

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

好了~

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

 

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

标签:imp   size   can   ORC   nbsp   shell   you   菜单   提示   

原文地址:https://www.cnblogs.com/sugartang/p/12754834.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!