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 { }
好了~
然后就可以在页面看到我们最新添加的啦~~
ng-alain创建组件添加路由导航菜单项基础步骤详解的更多相关文章
- 添加系统右键菜单项 管理员取得所有权(W)(带盾牌)
@color 0A @title 添加系统右键菜单项 管理员取得所有权(^&W)(带盾牌) by wjshan0808 @echo off echo * >nul reg add HKC ...
- Cisco路由技术基础知识详解
第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是( )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12 ...
- Android四大组件之——Activity的生命周期(图文详解)
转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai 联系方式:JohnTsai.Work@gmail.com [Andro ...
- sql server 2008 数据库管理系统使用SQL语句创建登录用户步骤详解
介绍了sql server 2008 数据库管理系统使用SQL语句创建登录用户步骤详解 --服务器角色: --固定服务器角色具有一组固定的权限,并且适用于整个服务器范围. 它们专门用于管理 SQL S ...
- ecshop后台增加|添加商店设置选项和使用方法详解
有时候我们想在Ecshop后台做个设置.radio.checkbox 等等来控制页面的显示,看看Ecshop的设计,用到了shop_config这个商店设置功能 Ecshop后台增加|添加商店设置选项 ...
- EA创建用例图步骤详解
EA创建用例图步骤详解 1 创建一个项目 2 选择需要的模型 3 新建模型包 4 新建图表 5 新建模型包 6 创建用户角色Actor 7 新建用例 8 关联用户和用例 9 最后整个项目浏览器目录结构 ...
- Scala IDEA for Eclipse里用maven来创建scala和java项目代码环境(图文详解)
这篇博客 是在Scala IDEA for Eclipse里手动创建scala代码编写环境. Scala IDE for Eclipse的下载.安装和WordCount的初步使用(本地模式和集群模式) ...
- 用maven来创建scala和java项目代码环境(图文详解)(Intellij IDEA(Ultimate版本)、Intellij IDEA(Community版本)和Scala IDEA for Eclipse皆适用)(博主推荐)
不多说,直接上干货! 为什么要写这篇博客? 首先,对于spark项目,强烈建议搭建,用Intellij IDEA(Ultimate版本),如果你还有另所爱好尝试Scala IDEA for Eclip ...
- vue构造函数(根实例化时和组件实例对象选项)参数:选项详解
实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...
- Facebook力推导航库:React Navigation使用详解
本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍 今年1月份,新开源的react- ...
随机推荐
- c语言中 -> 的用法
->是一个整体,它是用于指向结构体. 1.换种说法,如果我们在C语言中定义了一个结构体,然后申明一个指针指向这个结构体,那么我们要用指针取出结构体中的数据,就要用到"->&quo ...
- 关系抽取--Relation Extraction: Perspective from Convolutional Neural Networks
一种使用CNN来提取特征的模型,通过CNN的filter的大小来获得不同的n-gram的信息,模型的结构如下所示: 输入 输入使用word2vec的50维词向量,加上 position embeddi ...
- 常用CSS样式属性
01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...
- JS 可编辑表格的实现
1.实现效果 用户点击语文,数学,英语部分的单元格,可以实现分数的编辑,总分也会随之变化.先看下效果,如图: 2.设计思路 先通过HTML5+CSS3绘制表格,添加input的样式和err提示动画. ...
- VUE2 学习(推荐直接学习VUE3)
概念区分: 前端框架:Vue.AngularJS.React 界面模板:Bootstrap.easyUI.adminlte 学习地址: b站:https://space.bilibili.com/39 ...
- 「浙江理工大学ACM入队200题系列」问题 F: 零基础学C/C++39——求方程的解
本题是浙江理工大学ACM入队200题第四套中的F题 我们先来看一下这题的题面. 由于是比较靠前的题目,这里插一句.各位新ACMer朋友们,请一定要养成仔细耐心看题的习惯,尤其是要利用好输入和输出样例. ...
- 我服了!SpringBoot升级后这服务我一个星期都没跑起来!(上)
最近由于各方面的原因在准备升级 Spring Cloud 和 Spring Boot,经过一系列前置的调研和分析,决定把Spring Boot 相关版本从 2.1.6 升级到 2.7.5,Spring ...
- K8s如何启用cgroup2支持?
什么是 cgroup ️Reference: control groups(控制组),通常被称为cgroup,是Linux内核的一项功能.它允许将进程组织成分层的组,然后限制和监控各种资源的使用. 内 ...
- 基于python的数学建模---场线与数值解(微分方程)
import numpy as np from scipy import integrate import matplotlib.pyplot as plt import sympy def plot ...
- 前端学习 Nginx
前端学习 nginx 本篇主要讲解 nginx 常用命令.基础概念(正向/反向代理.负载均衡.动静分离.高可用).配置文件结构,并通过简单的实验来体验反向代理和负载均衡,最后说一下 nginx 原理. ...