7

我正在使用 Angular 6 构建一个站点，并且由于一个问题已经卡住了几天。我正在尝试根据活动页面更改导航栏上的文本颜色（列表项）。我已经看到了有关如何使用 AngularJS 和 javascript 执行此操作的示例。我在https://angular.io/api/router/RouterLinkActive library for 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 在这个模块上工作的任何想法？

4

1 回答 1

16

尝试将 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元素中。请确保这不是您的情况。

于 2018-07-11T19:19:07.697 回答