开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

` mat-tab`中的Angular 10 `routerLink`不工作

在Angular 10中，mat-tab是Angular Material库中的一个组件，用于创建选项卡式的导航菜单。routerLink是Angular中用于导航到不同路由的指令。

如果在mat-tab中使用routerLink时发现不起作用，可能有以下几个原因和解决方法：

确保正确导入相关模块和组件：
- 确保已经在模块中导入了MatTabsModule和RouterModule。
- 确保在组件中导入了Router和ActivatedRoute。

检查路由配置：
- 确保在app-routing.module.ts或其他路由配置文件中正确定义了相关路由。
- 确保路由路径与routerLink中的路径匹配。
使用正确的routerLink语法：
- 确保routerLink的值是一个字符串，指向目标路由的路径。
- 如果目标路由需要参数，可以使用数组形式的routerLink，例如[routerLink]="['/path', param]"。
检查mat-tab的选项卡内容：
- 确保mat-tab的内容是一个router-outlet，用于显示目标路由的组件内容。

综上所述，如果mat-tab中的routerLink不起作用，可以按照以上步骤逐一排查可能的问题，并进行相应的修复。如果问题仍然存在，可以参考Angular官方文档或搜索相关社区讨论来获取更多帮助。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（TBC）：https://cloud.tencent.com/product/tbc

相关搜索:.$save在angular中不工作 Angular 10中的Javascript函数无法工作 Angular 2 routerLink不工作 Angular 2中的RouterLink不能重定向 Angular 8-子routerLink不工作 Angular reactive forms patchValue或setValue不工作- Angular 10 Angular Routerlink不工作，我做的一切都是正确的 fullcalender angular 10初始视图不工作 HttpInterceptor不拦截Angular 10中的请求 JDNConvertibleCalendarDateAdapter库在angular 10中不兼容

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

🔥【Angular教程】路由入门

本篇我们就一起来看一看在Angular中如何使用路由。...在App的html模板中配置配置路由跳转&路由出口（router-outlet）登陆｜ <a [routerLink...通过routerLink携带参数复制代码在Angular获取路由参数需要用到ActivatedRoute: 使用ActivatedRoute...与懒加载相对的预加载 angular中配置懒加载后模块的加载被延迟到来使用时，但是有一些组件是需要优先加载并在使用的时候可以及时运行。...angular中的Router模块提供来两种预加载的策略：完全不预加载，这是默认值。惰性加载的特性区仍然会按需加载。预加载所有惰性加载的特性区。

4.4K5 0

AngularDart 4.0 高级-路由概述顶

设置概述添加angular_router 路由器功能位于angular_router库中，该库自带软件包。...将该包添加到pubspec依赖项中： pubspec.yaml (dependencies) dependencies: angular: ^4.0.0 angular_router: ^1.0.2...在任何使用路由器功能的Dart文件中，导入路由器库： import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令如果您已经熟悉Angular...但是，它不是教程，它掩盖了文档中其他地方更全面地介绍的Angular应用程序构建的细节。应用程序的最终版本的完整源代码可以从实例中查看并下载（查看源代码）。...示例应用程序正在运行想象一下可以帮助Hero Employment Agency开展业务的应用程序。英雄需要工作，该机构发现危机让他们解决。

6.1K2 0

Angular核心-路由和导航

Angular核心-路由和导航博客首页：蔚说的博客欢迎关注点赞收藏⭐️留言作者水平很有限，如果发现错误，求告知，多谢！有问题可私信交流！！！...（达内教育学习笔记）仅供学习交流 @[TOC]Angular核心-路由和导航) 多页面应用：一个项目有多个完整的HTML文件，使用超链接跳转–摧毁一颗DOM树，同步请求另一颗，得到之后再重建新的DOM...”HTML文件中。...==单页面应用的优势：==整个项目中客户端只需要下载一个HTML页面，创建一个完整的DOM树，页面跳转都是一个DIV替换另一个DIV而已—能够实现过场动画单页面应用不足：不利于SEO优化 Angular.../button> 提供一个占位符，Angular 会根据当前的路由器状态动态填充它。

2.2K2 0

Angular 6.x 快速入门

name = 'Angular'; } 定义数据接口在 TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象外，也可用于对「对象的形状（Shape）」进行描述...2.x', 'Angular 4.x', 'Angular 6.x']; } } 第五节 - 事件绑定在 Angular 中，我们可以通过 (eventName) 的语法，实现事件绑定。...指令为了让我们链接到已设置的路由，我们需要使用 routerLink 指令，具体示例如下：首页我的信息 Angular成员</

14.1K2 0

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

btn-secondary btn-sm">明细系统中没有客户... 然后把client.component放在dashboard中: dashboard.component.html: 添加新客户然后再dashboard中添加sidebar: <div class="...再安装一个库: npm install --save <em>angular</em>2-flash-messages 这个库可以略微灵活<em>的</em>显示提示信息. npm install --save <em>angular</em>2-flash-messages...应该是好用<em>的</em>.

4.3K5 0

浅谈Angular

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。...1.准备工作: ①全局安装 Angular CLI。...创建项目: 要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令： npm install -g @angular/cli ②创建工作区和初始应用:ng new 文件名 ③启动开发服务器...--2.路径参数传值,直接把要传递的参数写到routerLink的对应的值数组里,需要对路由配置做设置--> 商品展示... 参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新解决办法

4.4K1 0

教程|在 Angular 4 中加载功能模块（下）

您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。...从应用程序源代码中解压 Angular4LazyLoadModules 文件（位于 Angular4TutorialSrc.zip 中）。...您的下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。...浏览器中的应用程序现在应包含 Weather 和 Currency 菜单，如图 10 所示。图 10. 右上角的 Weather 和 Currency 菜单 ?...参见 Angular4PreLoadModules.zip 中的示例应用程序，更详细地了解预加载。自定义预加载：在大型应用程序中，仅预先加载少数惰性加载模块的做法是比较合理的。

2.3K1 0

Angular4记账webApp练手项目之三（在angular4项目中使用路由router）

前台源码前言 1、本项目是基于之前文章续写的。...用到了哪些 1、路由，子路由的使用，引入——定义Routes——router-outlet——routerLink——routerLinkActive 2、(click)指令，绑定事件 3、[ngClass...]指令，绑定样式安装 npm i --save @angular/router 官方网址：https://angular.io/guide/router 引入和使用要使用路由，我们需要在 app.module.ts...模块中，导入 RouterModule 。...修改菜单menu.component.html如下： routerLink 是路由地址，routerLinkActive的作用是，当 a 元素对应的路由处于激活状态时，weui-bar__item_on

1.4K3 0

Angular 从入坑到挖坑 - Router 路由使用入门指北

一、Overview Angular 入坑记录的笔记第五篇，因为一直在加班的缘故拖了有一个多月，主要是介绍在 Angular 中如何配置路由，完成重定向以及参数传递。...四、Step by Step 4.1、基础概念 4.1.1、base url 在 Angular 应用中，框架会自动将 index.html 文件中的 base url 配置作为组件、模板和模块文件的基础路径地址...a 标签的 href 属性进行跳转，当然也是可以的，不过在后面涉及到相关框架的功能时就会显得有点不辣么聪明的样子了 4.1.3、重定向与通配地址在普遍情况下，对于进入系统后的默认路径，我们会选择重定向到一个具体的地址上...在 Angular 中，需要在组件类中依赖注入 ActivatedRoute 来获取传递的参数信息这里的 queryParamMap 是一个 Observable 对象，所以这里需要使用 subscribe...，在 a 标签绑定的 routerLink 属性数组的第二个数据中，需要指定我们传递的参数值。

4.2K5 0

AngularDart4.0 英雄之旅-教程-07路由顶

并非所有的应用程序都需要路由，这就是为什么Angular路由器处于独立的可选软件包中的原因。...: const [ROUTER_DIRECTIVES], 您可以从指令列表中移除HeroesComponent，因为AppComponent不会直接显示英雄; 这是路由器的工作。...Heroes']">Heroes ''', 请注意锚标记中的[routerLink]绑定。...RouterLink指令告诉路由在用户点击链接时的位置。您使用链接参数列表定义了一个路由指令，这个列表在我们的小样本中只有一个元素，引用的路由名称。...你正在向路由器的navigate（）方法传递一个两元素链接参数列表（一个名字和路由参数），就像你在DashboardComponent中的[routerLink]绑定中一样。

17.5K3 0

Angular 快速学习笔记(1) -- 官方示例要点

RxJS 库中的一个关键类 c....添加路由，路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...要使用路由，必须首先初始化路由器，并让它开始监听浏览器中的地址变化 b....)，在a里添加routerLink Heroes 默认路由 a. { path: '', redirectTo: '/dashboard',...return of(result as T); }; } 在控制台中汇报了这个错误之后，这个处理器会汇报一个用户友好的消息，并给应用返回一个安全值，让它继续工作,可以使用

3.6K0 0

Angular 快速学习笔记(1) -- 官方示例要点

RxJS 库中的一个关键类 c....添加路由，路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...要使用路由，必须首先初始化路由器，并让它开始监听浏览器中的地址变化 b....)，在a里添加routerLink Heroes 默认路由 a. { path: '', redirectTo: '/dashboard',...return of(result as T); }; } 在控制台中汇报了这个错误之后，这个处理器会汇报一个用户友好的消息，并给应用返回一个安全值，让它继续工作,可以使用

3.7K5 0

lerna-lite 轻量化 monorepo 管理利器

├─ packages ├─ lerna.json └─ package.json 如果你不打算使用 npm 作为项目的包管理器的话需要更新 lerna.json 配置文件中的...npm i -D @lerna-lite/list 列出工作区中的所有本地软件包 run npm i -D @lerna-lite/run 运行script 脚本 watch npm i -D @...lerna-lite 将会以渐进式的方式在整个过程中逐步引入。...": "lerna exec -- npm install" } } PS：一次性安装 packages 中每个应用的依赖；启动所有应用：安装：npm i -D @lerna-lite/run；...routerLink]="['/sub-vue']" routerLinkActive="active">vue3 + <a [routerLink]="['/sub-react']" routerLinkActive

1651 0

Angular路由

F5和crtl+R是软刷，发送空的头，如果页面打开过服务器会返回302，走缓存 2. ctrl+F5 重走服务器，页面会返回200，不走缓存 1.5 search 属性向服务器发送字符串数据你可能不在意这个...其实是一样的道理 2.0 Angular路由 2.1 routerLink //1 // 2 通过roterLink不会刷新目前页面，只会根据routerLink改变浏览器的hash，导向对应的视图 routerLink...可以接受一个数组，来动态的改变url的值，以便我们传递特定的Url信息 2.2 routerLinkActive 实际开发中我们可能需要以下的场景就是，我们要知道当前页面激活的是哪一个路由。...图二后台通过逻辑来进行跳转注意：如果在Acomponent组件中使用navicate，如果利用jumpTomanger改变参数跳转当前页面，浏览器中的url和参数都不会改变，但是这个路由对象确实变化了

1.3K5 0

VBA小技巧10：删除工作表中的错误值

这里将编写VBA代码，用来删除工作表指定区域中的错误值，这在很多情况下都很有用。如下图1所示，有一组数据，但其中有一些错误值，我们想要自动删除这些错误值。 ?...图1 删除错误值的数据表如下图2所示。 ? 图2 如果不使用VBA，可以使用Excel的“定位”功能来实现。...如下图3所示，单击功能区“开始”的“编辑”组中的“查找和选择——定位条件”，弹出“定位条件”对话框。在该对话框中，选取“公式”中“错误”前的复选框，如下图3所示。 ?...图3 单击“确定”后，工作表中的错误数据单元格会被选择，单击“Delete”键，删除错误值，结果如上图2所示。...使用IsError函数来判断单元格中是否是错误值，如果是，则设置该单元格为空。

3.3K3 0

Excel应用实践10：合并多个工作簿中的数据

Excel文件的一个工作表中？...假设工作簿文件结构如下图1所示。 ? 图1 其中，在文件夹“要合并的工作簿文件”中，有3个示例工作簿文件“测试1.xls、测试2.xls、测试3.xls”，将它们合并到工作簿“合并.xls”中。...在“合并.xls”工作簿中，有三个工作表。其中，“设置”工作表中的单元格B2中的数据为每个工作簿中想要合并的工作表名，这里假设每个工作簿中的工作表名相同；单元格B3为要合并的数据开始的行号。 ?...如果一切顺利，则合并数据完成，并弹出如下图5所示的信息。 ? 图5 我们可以查看结果。在“导入工作簿名”工作表中，列出了已经合并数据的工作簿名，如下图6所示。 ?...图6 在“合并工作表”工作表中，是合并后的数据，如下图7所示。 ? 图7 代码的图片版如下： ? ?

2.2K4 1

Angular2 之路由与导航基础知识路由模块组件路由路由守卫

导航是很简单的，只是不同页面之间的切换，路由是实现导航的一种。一个url对应的一个页面，在angular2中是一个组件。定义一个规则。...路由是从@angular/router包中引入的。路由都是需要进行配置的。而这个配置需要的也就是RouterModule模块。一个路由配置 path中不能用斜线/开头。...const appRoutes: Routes = [ { path:'',// empty path匹配各级路由的默认路径。它还支持在不扩展URL路径的前提下添加路由。...在展示父路由的位置中的某个地方展示子路由对应的地方。路由模块最开始的路由，我们是直接写在app.module.ts文件中的，像这样，我们可以实现简单的导航。...CanActivateChild守卫的工作方式和CanActivate守卫很相似，不同之处在于它会在每个子路由被激活之前运行。我们保护了管理特性模块不受未授权访问，也同样可以在特性模块中保护子路由。

3.3K1 0

Angular Material 的设计之美

但是在编写 ng-matero 的过程中，随着对 Angular Material 的深入了解，我发现这种说法稍显狭隘甚至产生了一定的误导，所以我希望这篇文章可以让大家对 Angular Material...顺便插一句，如果大家纠结用 Sass 还是 Less，可以看一下这篇文章 CSS 预处理器中的循环，个人不建议用 Less，请原谅我无意引战?。...少即是多 Less is more（少即是多）—— 密斯·凡德罗我想很多人对 Angular Material 望而却步的原因之一就是它的组件看上去有点少。然而在一般的业务中这些组件已经够用。...$mat-gray: $mat-grey; 灵活的主题定制 Angular Material 的样式几乎全部写在了 mixin 中，定制起来非常容易。...我最开始认为将所有样式全部写到 mixin 中并不是很优雅的做法，但是在编写 ng-matero 暗黑主题的时候，我发现不这样做是不行的。以下是 Angular Material 主题定制的方法。

5K3 0

使用angular4和asp.net core 2 web api做个练习项目(四)

window.location.href='/', 如果使用angular的路由router.navigate跳转的话会有问题. ?...做一些清理工作: 由于用户注册是在authorization server进行的, 所以把angular项目中的相关文件以及app.module里面的调用删除......然后是html: ...navbar.html 添加上链接按钮: <a class="nav-link" href="#" routerLink...然后我要用asp.net core 2.0 web api 和 identity server 4 以及 angular 5 做一个项目了(angular 5正式版刚刚出来), 大约 300个页面...

1.5K10 0

Angular 从入坑到挖坑 - 路由守卫连连看

一、Overview Angular 入坑记录的笔记第六篇，介绍 Angular 路由模块中关于路由守卫的相关知识点，了解常用到的路由守卫接口，知道如何通过实现路由守卫接口来实现特定的功能需求，以及实现对于特性模块的惰性加载...添加 router-outlet 标签用来声明路由在页面上渲染的出口 Angular Router <a routerLink="/crisis-center" routerLinkActive...4.2、路由守卫在 Angular 中，路由守卫主要可以解决以下的问题对于用户访问页面的权限校验（是否已经登录？已经登录的角色是否有权限进入？）...，对于 CanDeactivate 守卫来说，我们需要将参数中的 unknown 替换成我们实际需要进行路由守卫的组件 import { Injectable } from '@angular/core...，而惰性加载和重新配置工作只会发生一次，也就是在该路由首次被请求时执行，在后续请求时，该模块和路由都是立即可用的 4.3.2、CanLoad：杜绝未通过认证授权的组件加载在上面的代码中，对于 CrisisModule

3.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭