【问题标题】:Angular-7 active link on tab is not working?选项卡上的 Angular-7 活动链接不起作用?
【发布时间】:2020-04-20 23:40:03
【问题描述】:

我有 4 个图标,我正在尝试像这样的 活动链接 - 但它不起作用不知道为什么我猜我是当我更改路由器时也缺少一些步骤,我需要突出显示该路由器选项卡。 这是我的一个模块的 .Html 文件 -(我只在 .html 而不是 .ts 文件中进行了更改)

 <div class="smart-manage">
 <a routerLink="/dashboard" class = "active" routerLinkActive = "active"[routerLinkActiveOptions]="{exact: true}" >
              <span data-toggle="tooltip" title="Smart Dashboard" data-placement="right">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
                                20 20" width="20" height="20"> 

【问题讨论】:

  • 移除活动类
  • 你能创建一个最小的堆栈闪电战吗?
  • 项目真的很大我可以给你链接我也在localhost:4200/home工作
  • 其他人如何能够访问您的“本地主机”?

标签: javascript angular angular7 mean-stack


【解决方案1】:

获取您的代码:

 <a routerLink="/dashboard" class="active" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">

当 url 为 '/dashboard' 时,活动类将被添加到 a 标签中。如果 url 发生变化,该类将被删除。

问题:你还是用class="active"添加类

试试:

<a routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">

带样式:

.active { color: red; }

a 标记文本将在活动时显示为红色。

【讨论】:

  • 谢谢您,但我确实尝试了您的方法,但它不起作用@angular :(
  • 它应该可以工作。你可以提供一个stackblitz的样本复制吗?
  • 我在本地主机上工作,我的地址是localhost:4200/home
  • 您删除了 class="active" 并且在 /dashboard 上导航时没有添加该类?在仪表板上导航时的确切网址是什么?
  • 更新您的原始帖子并向我展示完整的 html + css
猜你喜欢
  • 1970-01-01
  • 2018-10-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-27
  • 1970-01-01
相关资源
最近更新 更多