Angular 6 routerLinkActive 不工作
Angular 6 routerLinkActive not working
我正在使用 Angular 6 构建一个站点,现在已经因为一个问题卡住了几天。我正在尝试根据活动页面更改导航栏上的文本颜色(列表项)。我已经看到有关如何使用 AngularJS 和 javascript 执行此操作的示例。我在 https://angular.io/api/router/RouterLinkActive library for Angular 5+ 找到了 routerActiveLink 库文档,这似乎是一个简单的解决方案,但它对我不起作用。我已经尝试了很多我在网上看到的不同例子,并且 none 已经奏效了。我错过了什么吗?以下是一些代码片段:
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
class 出现在 li
元素中,而它一直出现在 anchor
元素中。请确保这不是您的情况。
我正在使用 Angular 6 构建一个站点,现在已经因为一个问题卡住了几天。我正在尝试根据活动页面更改导航栏上的文本颜色(列表项)。我已经看到有关如何使用 AngularJS 和 javascript 执行此操作的示例。我在 https://angular.io/api/router/RouterLinkActive library for Angular 5+ 找到了 routerActiveLink 库文档,这似乎是一个简单的解决方案,但它对我不起作用。我已经尝试了很多我在网上看到的不同例子,并且 none 已经奏效了。我错过了什么吗?以下是一些代码片段:
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
class 出现在 li
元素中,而它一直出现在 anchor
元素中。请确保这不是您的情况。