Zorro中的Menu

最新推荐文章于 2023-03-21 17:16:21 发布
VIP文章 最新推荐文章于 2023-03-21 17:16:21 发布
阅读量744 收藏
点赞数
分类专栏： angular ng-zorro 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45158253/article/details/110821408
版权

zorro官网上有具体介绍，我想解释的是Menu配合路由的用法
在这里插入图片描述
上面是官网的实例
我做了一些延伸

顶部导航栏

在这里插入图片描述
像这种的要先改变css，再改变js

<li nz-menu-item nzMatchRouter>
	 <a [routerLink]="['/', 'components', 'menu', 'en']">English Menu Document</a>
</li>

这里面的a的路径是提前在route里面定义好的，点击时，根据a的路径，匹配route的路径，成功匹配的话，就会跳转路径。

侧面导航栏

在这里插入图片描述

这里原理与上面一样，但由于是侧面导航栏，一般会配合SPA，点击时，另一侧发生变化，并传递参数，

最低0.47元/天 解锁文章
蒲公英
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ZORRO遥控器说明书.zipZ
04-25
ZORRO遥控器说明书.zipZ
angular接收路由传来的值
web
12-08 474
上篇文章提到了用路由（route）传值： https://blog.csdn.net/weixin_45158253/article/details/110821408 看下面也行（不用看上面的链接了） 这里写下如何接收路由传来的值 官网方法： 我的使用 当我使用这个方法时，并没有得到预期结果 路由配置： { path: 'text', component: TextComponent, children: [ { path: ''
antd-配置
神zhi殇的博客
08-18 1298
// 文件目录下使用下面的命令，快速在编辑器中打开该项目 code ./ pwd // 查看当前文件的路径，eg：abc文件 // eg：/c/Users/t-likaipeng/Desktop/abc ng-zorro-antd的时候，有配置化的选项；不用自己加参数。 其他的参数呢？圆角等等。 ng add ng-zorro-antd --locale=zh_CN --theme nz-sider和nz-menu都有主题 nzTheme的属性，改变颜色。 text-transform:u
[Angular学习笔记]路由与导航
salt_fash的博客
07-16 850
路由与导航 在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。 导入路由 Angular 的路由器是一个可选的服务，它用来呈现指定的 URL 所对应的视图。 它并不是 Angular 核心库的一部分，而是在它自己的 @angular/router 包中。 像其它 Angular 包一样，你可以从它导入所需的一切。 import { RouterModule, Rou...
【Angular】如何让ng-zorro-ant菜单刷新时自动展开父结点和选中子节点
向着光芒的女孩
11-16 1622
核心代码： <li nz-submenu [nzOpen]="rla1.isActive" #rla1="routerLinkActive" routerLinkActive> <span title><span class="nav-text"> 用户管理</span></span> <ul> <li nz-menu-item [nzMatchRouter]="true"><a routerLink=
nz-tree的右键菜单的实现， 以及选中状态的实现
muzizongheng的专栏
12-25 3696
ant design of angular中的nz-tree在官方实例并没有给出和context menu的例子， 不过官方的context menu独立的例子倒是有：https://ng.ant.design/components/dropdown/zh#components-dropdown-demo-context-menu我们需要把nz-tree和context menu 结合。nz-...
Angular中使用ng-zorro图标库部分图标不能正常显示问题
10-17
主要介绍了Angular中使用ng-zorro图标库部分图标不能正常显示问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
浅谈ng-zorro使用心得
10-17
主要介绍了浅谈ng-zorro使用心得，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ng-zorro-antd 入门初体验
10-17
主要介绍了ng-zorro-antd 入门初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解关于Angular4 ng-zorro使用过程中遇到的问题
12-13
关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问题与操作步骤 章节二： angular 4 引入路由=> 组件模块化#module模块化=> 路由模块化（路由按需加载） 章节三： 引入拦截器，统一管理请求与相应
Angular 入门教程系列：29：简单布局的页面
知行合一 止于至善
08-04 7855
这篇文章用最简单的方式做一个包含左侧可收缩的侧边栏菜单和固定头部的页面布局。 修改内容 基本上还在前面的文章上使用的内容，为了简单，只是简单修改一下HTML和CSS的内容 default-layout.component.html liumiaocn:default-layout liumiao$ cat default-layout.component.html &amp;amp;amp;amp;lt;nz-...
基于NG-ZORRO的登录、菜单、多标签页页面架构
weixin_41210946的博客
03-21 753
在一个后台管理系统中，用户和角色的管理都是必不可少的功能，基于NG-ZORRO实现一套基本的登录、菜单、多标签页的页面。
前端路由的配置教程
ldgjzjmzknbn的博客
09-15 1613
首先在路由界面配置路由，children是配置子路由的 const routes: Routes = [ {path:'',component:HomeComponent} ]; 然后在引入组件： Routes的使用 import { HomeComponent } from './home/home.component'; 在path中不能使用"/"，因为在多个视图间导航时，自由使用相对或者绝对路径 RouteRoutlet的使用： 插座，所有的界面都在本界面的下面显示 RouterL
ng-zorro nz-menu修改样式
小武的博客
08-16 609
菜单
angular整合ng-zorro、左边导航栏
JUST_lOVE_LE的博客
11-10 1436
上一篇已经介绍了angular了，接下来介绍ng-zorro，这个阿里推出的ant design of angular，已经做了一些基础性的工作，并且封装了一些组件，并且也是官方推荐的。 在新建好的angular工程中引入ng-zorro代码如下: ng add ng-zorro-antd 等待安装完成后通过命令 npm start 或者 ng serve -- open 均可以启动工程,页面如下图，这里我展示的是进行修改后的结果，这篇文章也会说明如何修改代码使得左边菜单栏符合我们的实际需求 通过检
左边是导航栏右边是相应的页面_angular整合ng-zorro、左边导航栏
weixin_39976251的博客
01-26 469
上一篇已经介绍了angular了，接下来介绍ng-zorro，这个阿里推出的ant design of angular，已经做了一些基础性的工作，并且封装了一些组件，并且也是官方推荐的。 在新建好的angular工程中引入ng-zorro代码如下:ng add ng-zorro-antd等待安装完成后通过命令npm start或者ng serve -- open均可以启动工程,页面如下图，这里我...
angular13 + ng-zorro通过路由重用实现Tab页签
zxf3800的博客
08-24 1354
angular13 + ng-zorro通过路由重用实现Tab页签
一招搞定angular项目中菜单栏匹配路由高亮
cautionHua的博客
08-23 646
一招搞定angular项目中菜单栏匹配路由高亮 技术栈：Angular + NG-ZORRO 当你的项目中选择一个左侧菜单，一刷新就将高亮选中效果刷没了，或者是通过点击某个按钮跳转到别的路由菜单中，结果发现菜单中高亮效果还是保持在之前的样式，要花费不少的时间来同步，这咋搞？ 通过路由来匹配菜单一招搞定 // this.router.url 获取到当前路由 <ng-container *ngFor="let menu of menus"> <li nz-menu-item [nzSe
angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
weixin_34163741的博客
12-06 324
返回目录 使用 NG ZORRO 在上一篇文章中，我们已经安装了NG ZORRO，并在跟模块中引入了，在子模块中使用还需要再次引入。 编辑layout模块中的header组件 在layout.module.ts中引入NG ZORRO import { NgZorroAntdModule } from 'ng-zorro-antd'; ...
ng-zorro中的嵌套表格
最新发布
08-23
在ng-zorro-antd中，可以使用嵌套表格来展示复杂的数据结构或多层级的表格数据。通过使用ng-template和nzExpand指令，我们可以定义嵌套表格的展开和折叠行为。在嵌套表格中，可以通过nzExpand指令的点击事件来切换...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值