NG Zorro angular 中 导航栏一刷新就回到默认选中

最新推荐文章于 2020-11-16 14:21:03 发布
最新推荐文章于 2020-11-16 14:21:03 发布
阅读量720 收藏
点赞数 2
分类专栏： angular 文章标签： angularjs ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vransy/article/details/107487630
版权

原代码

  <li nz-menu-item nzSelected >
      <a [routerLink]="['/header/details']"><i nz-icon nzType="search" nzTheme="outline"></i>查询借阅</a>
    </li>

官网上说了 要根据路由去判断已选中的导航 则 需要添加
nzMatchRouter
即可
更改代码

  <li nz-menu-item nzSelected nzMatchRouter>
      <a [routerLink]="['/header/details']"><i nz-icon nzType="search" nzTheme="outline"></i>查询借阅</a>
    </li>
Vransy.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Zorro中的Menu
web
12-07 750
zorro官网上有具体介绍，我想解释的是Menu配合路由的用法 上面是官网的实例 我做了一些延伸 顶部导航栏 像这种的要先改变css，再改变js <li nz-menu-item nzMatchRouter> <a [routerLink]="['/', 'components', 'menu', 'en']">English Menu Document</a> </li> 这里面的a的路径是提前在route里面定义好的，点击时，根据a的路径，匹配r
ng select 默认选中某一项
Saamao的博客
06-13 990
//html&lt;div style="display: flex;justify-content: center;" ng-repeat="s in typeList track by $index"&gt; &lt;select ng-model="s.type" ng-options="x.code_val as x.code_desc for x i...
查询条件下分页应该处于第一页
Linjing127218的博客
01-20 1744
在项目开发过程中，根据查询条件查询数据时应将表格分页置于第一页，查询条件之前加上一下两句话即可将分页置于第一页（我才用的easyui框架） //查询条件下分页恢复到第一页 var opts=$("#abnormalInfoDg").datagrid("options"); opts.pageNumber=1;
Angular实现前端分页功能-----Angualr8+NG-ZORRO
qq_41562587的博客
09-19 1312
调用每次页数变化的回调函数，ts中及时更新数据即可 我的是每页显示五条数据 共100条数据 需要20页 HTML代码： TS代码：
ng-zorro菜单测试
henreash的专栏
09-09 1302
ng-zorro支持angular6，提供了很多常用的组件，使用非常方便。这里记录测试ng-zorro菜单过程中遇到的问题。 在前端动态生成左侧的菜单栏，卡顿的现象特别严重。经过多次测试，发现与angular的机制有关。angular动态生成界面的内容是通过不断的轮询实现的。如果我们在使用ng-for或ng-if指令生成ui界面时，依赖的数据是实时计算的，而且有些许的耗时，则会卡顿，因为计算数据...
Angular中使用ng-zorro图标库部分图标不能正常显示问题
10-17
在Angular开发过程中，使用ng-zorro作为前端UI框架时，可能会遇到部分图标无法正常显示的问题。这通常是由于未正确导入和注册图标导致的。ng-zorro图标库包含了大量的图标资源，但默认情况下，ng-alain项目仅预导入...
angular6-ng-zorro-admin:angular6 + ng-zorro
05-14
运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中...
详解关于Angular4 ng-zorro使用过程中遇到的问题
12-13
关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问题与操作步骤 章节二： angular 4 引入路由=> 组件模块化#module模块化=> 路由模块化（路由按需加载） 章节三： 引入拦截器，统一管理请求与相应
关于angular引入ng-zorro的问题浅析
10-14
引入Ng-Zorro到Angular项目中主要有两种方式：第一种是通过官方提供的预构建版本，第二种是自定义构建。本文主要讨论的是第二种方法，即自定义构建过程。 首先，确保已经安装了Angular CLI，这是Angular开发的基础...
ng-zorro-admin:基于angular和ngzorro的后台
04-28
代码脚手架运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。建造运行ng build来构建项目。 构建工件将存储在...
angular项目 集成ng zorro 和ng alain的Demo
10-30
在本文中，我们将深入探讨如何将Angular项目与ng-zorro-antd和ng-alain进行集成，以构建一个功能丰富的Web应用程序。ng-zorro-antd是Angular的Ant Design组件库，而ng-alain则是一个基于Angular的后台管理模板，提供...
Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码
12-03
Angular,Ng-Zorro框架nz-icon组件加载第三方SVG图标示例代码，完整工程文件夹。html图标书写格式：[nzType]="'hello:computer'"></i>
jira-clone-angular：使用Angular，ng-zorro和Akita构建的简化的Jira克隆
01-31
使用Angular 10，Akita和ng-zorro构建的简化的Jira克隆 第二阶段将无法按计划完成。 我和都忙于其他承诺。 查看我们。 您可以查看我为Jira Clone编写的组件的故事书集合 :right_arrow: :closed_book: 感谢您一直...
基于阿里angular组件NG-ZORRO开发的一套企业后台管理系统模板 目的是简单、方便、快速的搭建一个企业后台管理系统
最新发布
07-13
基于阿里angular组件NG-ZORRO开发的一套企业后台管理系统模板。目的是简单、方便、快速的搭建一个企业后台管理系统。 在线Deom 模板项目提供了登录页面、动态菜单、session存储、权限路由守卫等功能，您只需要开发...
浅谈angular4 ng-content 中隐藏的内容
08-29
Angular4 中的 ng-content 指令是一个强大的内容投射机制，允许开发者在组件模板中插入动态内容。然而，在使用 ng-content 时，经常会遇到一些隐藏的内容问题。本文将深入探讨 Angular4 ng-content 中隐藏的内容，并...
ng-table 是否启用分页/排序/搜索
adgjl3331的博客
09-11 475
ng-table 设置applyFilter/applyPaging/applySort 为false 只是功能上的禁用，样式仍旧存在（如：排序按钮，分页按钮） ng-table 不使用分页只需要设置dataOptions:{applyPaging:false} 即可，设置后发现数据是全部加载到一页了，但是底下的分页按钮仍然显示；通过阅读ng-table 源码发现，要使按钮同步消...
angular+ng-zorro后台搜索页面
JUST_lOVE_LE的博客
11-16 1121
继续上一次表格的内容，这次要在页面的头部加上一个搜索框，然后让表格的数据可以根据搜索内容更新 首先要介绍下ng-zorro的栅格化布局,以下摘自官网 在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，将整个设计建议区域按照 24 等分的原则进行划分。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。 布局的栅格
NG-ZORRO（0.6.x）的Pagination分页功能
一名业余前端的博客
05-07 2319
   查看NG-ZORRO的官方文档，关于分页功能，文档中只列出一些基本的功能，但是没有提到如何监听分页点击和分页每页条数变化。   在webstorm中测试的时候，发现webstorm提示了两个官方文档中没提到的功能。一个nzPageIndexClickChange，一个nzPageSizeChange。经测试，第一个就是监听分页变化的函数，第二个是监听分页每页条数变化的函数。...
angular6+ ng-zorro 表格后台分页及排序功能实现
kksw1121
02-16 5126
&lt;nz-table #rowSelectionTable [nzData]="dataSet" nzBordered [nzFrontPagination]="false" [nzLoading]="loading" [nzTotal]="total" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPag
在项目中修改ng-zorro组件默认样式的一些方法
03-25
修改 ng-zorro 组件的默认样式的方法有以下几种： 1. 使用 ng-deep 伪类：在组件的样式表中使用 ng-deep 伪类来覆盖组件的默认样式。例如： ```css :host ::ng-deep { .ant-btn { background-color: #ff0000; } } ``` 2. 使用 ::ng-deep 伪类：类似于 ng-deep，可以使用 ::ng-deep 来覆盖组件的默认样式。例如： ```css ::ng-deep .ant-btn { background-color: #ff0000; } ``` 3. 自定义主题：可以使用 Angular Material 的 Theming 功能来自定义组件的主题。具体操作方式可以参考官方文档，需要注意的是，这种方法需要安装 @angular/material 和 @angular/cdk。 4. 在全局样式表中覆盖样式：可以在全局的样式表中覆盖组件的默认样式，例如： ```css .ant-btn { background-color: #ff0000; } ``` 总之，修改 ng-zorro 组件的默认样式有很多种方法，可以根据情况选择适合自己的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值