我正在尝试将routerLinkActive实现到我的应用程序,但我面临的问题是它将类设置为活动到多个链接.这就是我在做的方式

<ul class="nav nav-tabs">
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

这就是它的外观

这就是dev-tools的外观 还有我的地址吧

我错过了什么,因为我正在按照角度文档中的解释.

我的routerLinkActive有问题.

这是两个GIF解释.

1. 第一个问题:当我启动应用程序时,routerLinkActive都没有激活该类.但如果我点击不同的路线,那最终会有效.

2. 当我首先点击当前路线时,不显示该类.

这是我的代码:

<ul class="nav">
   <li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
       <a [routerLink]="[menuItem.path]">
           <i class="material-icons">{{menuItem.icon}}</i>
           <p>{{menuItem.title}}</p>
       </a>
   </li>
</ul>

这是我路线的树.(红色称为组件)

和我的路线代码:

import ...

const routes : Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      }, ..., {
        path: 'challenges',
        component: ImageRankComponent
      }, {
        path: 'niveau',
        component: LevelComponent
      }, {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  providers: [
    {
      provide: LocationStrategy,
      useClass: …

我有角度4的routerLinkActive问题.我有这个设置.

export const FruitRoutes = [
    {
        path: 'fruits/:id', component: FruiteNav,
        children: [
            {path: '', component: FruitGeneral},
            {path: 'settings', component: FruitSettings}
        ]
    }
];

这是一个单一水果的标签页.例如:fruits/4(常规标签)和水果/ 4 /设置(设置标签)

选项卡导航器(FruitNav)设置如下,它适用于大多数情况:

 <ul class="nav nav-tabs">
        <li class="nav-item">
            <a [routerLink]="['/fruits', fruitId]" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">General</a>
            </li>
            <li class="nav-item">
                <a [routerLink]="['/fruits', fruitId,'settings']" class="nav-link" routerLinkActive="active">Settings</a>
            </li>
        </ul>

    <router-outlet></router-outlet>

现在的问题是:这条路线目前处于水果/ 4.如果我在任何子选项卡中,甚至在主nav类中,并且调用另一个fruitId,则routerLinkActive将不起作用.例如:

<a style="color:#fff" [routerLink]="['/fruits', 5,'settings']" class="nav-link">Test</a>

将导航到fruit/5,但不会激活/选择任何选项卡

典型的用例可以是用户可以导航到的类似水果的列表.

有人有解决方案吗？

我需要在我的应用程序中使用“relativeTo”属性以及“routerLinkActive”指令。有一个单击侦听器功能，该功能使用路由

router.navigate(this.router.navigate(['path']{relativeTo:this.route});

会没事的。但在那种情况下，我不能使用 routerLinkActive 指令。

我怎样才能同时使用两者？

我在Angular中遇到问题：我有三个链接，其中一个具有查询参数（由于使用了解析器）。如果单击第一个和第三个链接，routerLinkActive则已设置。如果我单击，第二个链接routerLinkActive也被设置。但是，如果我更改了组件内部的查询参数，则routerLinkActive无法设置。

因此，我需要忽略查询参数。但是它是如何工作的呢？谁能帮我？

这是我的简单代码：

<div class="col-12">
    <ul class="nav nav-pills nav-justified">
        <li class="nav-item">
            <a 
              class="nav-link" 
              routerLink="/einstellungen/allgemein"                             
              routerLinkActive="active">
              Allgemein
            </a>
        </li>
        <li class="nav-item">
            <a 
              class="nav-link" 
              [routerLink]="['/einstellungen/kalender']" 
              [queryParams]="{branch: myBranches[0].id}" 
              routerLinkActive="active"
              [routerLinkActiveOptions]="{exact: false}">
              Kalender verwalten
           </a>
        </li>
        <li class="nav-item">
            <a 
              class="nav-link" 
              *ngIf="user.is_admin" 
              routerLink="/einstellungen/filialen" 
              routerLinkActive="active">
              Filialen verwalten
            </a>
        </li>
    </ul>
</div>

在 *ngFor 循环中，我正在构建带有示例阅读文本的搜索结果（垫卡）列表，我希望允许用户单击其中一个来阅读更多内容，并打开一条通往填充的文档模板的路径与正确的医生。

这个静态 HTML 与 routerlinkactive 一起使用，捕获文档视图页面中的参数...

<button mat-button [routerLink]="['/docview', {sDocName: 'AW010001'}]">READ MORE...</button>

我想将硬编码的文档 ID 'AW010001' 替换为通过 *ngFor 的每次迭代的适当 ID。但是这段代码失败了...

<button mat-button [routerLink]="['/docview', {sDocName: '{{sDocIDs[i]}}'}]">READ MORE...</button>

我得到的错误是典型的......

解析器错误：获得插值 ({{}})，其中表达式应位于 [['/docview', {[sDocName]:'{{sDocIDs[i]}}' }]] 中的第 25 列

在我的Angular 5项目中，我有一个引导导航栏菜单。routerLinkActive当路径的开头与菜单的routerlink匹配时，效果很好，例如：

<li [routerLinkActive]="['active']">
  <a [routerLink]="['/entity/teacher']">Teacher</a>
</li>

上面的代码可以很好地激活菜单项“ / entity / teacher / add”等等

问题是，我有一种“包罗万象”的导航项，其中包含不排队的内容：

<li [routerLinkActive]="['active']">
  <a [routerLink]="['/config']">Configuration</a>
</li>

我想这个项目，以突出的路径/tasks和/entity/settings也一样，不仅对/config。

问题是，我无法更改应用程序的路由。如何获得菜单项以排队其他路由路径以及routerLink中的菜单项？

我正在使用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; …

我正在使用Angular 6，但在导航菜单方面遇到了问题。

当我单击子项时，使用routerLinkActive时，只有子项设置为活动状态，而不是父项。

我想知道如何在Angular 6中选择其父项时将其设置为活动状态？

可以说，我单击“地板维护”，它是“服务”的子项。仅“地板维护”将设置为活动状态，而不是“服务”。我想在单击其任何子项时使用routerLinkActive激活“服务”按钮。

导航菜单

<nav class="navbar navbar-expand-lg navbar-light bg-white thick-border-bottom">
  <div class="container">
  <a class="navbar-brand" routerLink=""><img id="logo" class="img-fluid" src="./assets/logo.svg" alt=""></a>
  <button class="navbar-toggler my-3" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" routerLink="" routerLinkActive="active" [routerLinkActiveOptions]={exact:true}>Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
      </li>

        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" routerLink="services" routerLinkActive="active" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
            Services
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" routerLink="services/janitorial-services" routerLinkActive="active">Janitorial Services</a>
            <a …

页面中没有路由。我在下面使用了HTML和配置代码。

<nav aria-label="Page navigation">
    <ul class="pagination pagination-plain">
      <li>
        <a href="review/words" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li [routerLinkActive]="['active']">
        <a [routerLink]="review/words">1</a>
      </li>
      <li [routerLinkActive]="['active']">
        <a [routerLink]="review/phrase">2</a>
      </li>
      <li>
        <a href="javascript:void(0)" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>

路由配置代码为

const appRoutes: Routes = [
  { 
    path: '', 
    component: IndexComponent,
 },
 { 
    path: 'index', 
    component: IndexComponent,
 },
 { 
    path: 'review/words', 
    component: WordsComponent,
 },
 { 
    path: 'review/phrase', 
    component: SentenceComponent,
 }
];

当我在分页链接中单击“ 1”或“ 2”时，出现以下错误。

错误错误：未捕获（承诺）：错误：无法匹配任何路由。URL段：'review / phrase / NaN'错误：无法匹配任何路由。网址段：ApplyRedirects.noMatchError（router.es5.js：1404）的[review / phrase / NaN]在CatchSubscriber.selector的[角度]（router.es5.js：1379）在CatchSubscriber.error的[角度]（catch.js） ：104）在MapSubscriber.Subscriber._error（Subscriber.js：128）的[angular]在MapSubscriber.Subscriber.error（Subscriber.js：102）的[Angular]在MapSubscriber.Subscriber._error（Subscriber.js：128）的[angular] ）[Subscriber.Subscriber.error（Subscriber.js：102）的[Angular] …

<div class="menuItem mb-3" *ngFor="let menuItem of menuItems">
    <a routerLink="{{menuItem.link}}" routerLinkActive="active">
        <img src="{{menuItem.icon}}" alt="{{menuItem.name}}" />
        <p class="text-center f-12">{{menuItem.name}}</p>
    </a>
</div>

在激活的路由器链接上，我想更改{{menuItem.icon}}为{{menuItem.iconAtv}}

我有一些这样的链接

<li routerLinkActive="active" class="nav-item">
<a [routerLink]="['contracts']" 
[queryParams]="{ activeOnly: false }" 
class="nav-link">Contracts</a>
</li>

你在参数中看到我有？activeOnly=false，当我的网址像这样时，使用这种方法一切都可以

Contracts?activeOnly=false 在 html 中添加活动 css 类，用户可以看到它是活动链接

我遇到的问题是，有时 url 可以像这样的 contracts?activeOnly=true&id=1一样更改，然后active css 不再适用。

我需要的是在元素上有活动的 css 类，即使 url 已随查询参数更改。

示例如果 url 是这样的contracts?activeOnly=true&id=1

活动CSS 类也必须保留在LI html 标签上