![](/img/trans.png)
[英]Angular 6 - RouterLinkActive not Working After Page Refresh
[英]Angular 6 routerLinkActive not working
我正在使用Angular 6构建一个站点,并且已经在问题上停留了几天。 我正在尝试根据活动页面更改导航栏上的文本颜色(列表项)。 我已经看到了如何使用AngularJS和javascript进行此操作的示例。 我在https://angular.io/api/router/RouterLinkActive库中看到了针对Angular 5+的routerActiveLink库文档,这似乎是一个简单的解决方案,但它对我不起作用。 我尝试了许多我在网上看过的不同的例子,但都没有。 我错过了什么吗? 以下是一些代码段:
header.component.html
<div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
<li class="main-links" [routerLinkActive]="['active']">
<a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
</li>
<li class="main-links">
<a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
</li>
<li class="main-links">
<a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
</li>
<li class="main-links">
<a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
</li>
<li class="main-links">
<a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
</li>
<li class="main-links">
<a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
</li>
</ul>
这是我在header.component.less中声明的活动声明:
.active {
color: #009fdb;
font-family: font-bold;
}
当我将[routerLinkActive]与括号一起使用时,页面根本不加载,当我在a标签中使用routerLink和routerLinkActive时,它根本不会注册。 我缺少一些进口产品吗? 我尝试从@ angular / core导入路由器,routerlinkactive和routerlink。
我故意在代码示例中使用routerLinkActive两种不同的样式。 当我实际运行它时,它不是这样的。
我安装了Angular 6,bootstrap 4.1.1,jquery 3和popperjs。
经过进一步审查,我发现routerLinkActive在根应用程序模块内的元素上正常工作。 我为我的页眉和页脚创建了一个名为UiModule的新模块,其功能在标题内部不起作用。 关于如何让routerLinkActive在这个模块上工作的任何想法?
尝试将RouterModule导入UiModule,它将无法使用app.module.ts文件中导入的那个
import { RouterModule } from '@angular/router';
// some other imports here
@NgModule({
imports: [
RouterModule
],
exports: [
// export UI components
],
declarations: [
// declare UI components
]
})
当我遇到这个问题时,我正确地导入了一切。 我花了几天时间才发现问题来自于我的HTML结构
<li class="nav-list">
<a routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}"
routerLink="/"
href="/">
<i class="material-icons nav-link-icon">person</i>
<span class="nav-link-text">Profile</span>
</a>
</li>
问题在于我正在观察.active
类出现在li
元素中,而它始终出现在anchor
元素中。 请确保这不是您的情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.