对于基本路径，Angular 2 routerLinkActive始终处于活动状态
基本路径是指在Angular应用中定义的根路径，用于指定应用的基本URL。在Angular中，可以通过在根模块（AppModule）中的providers数组中提供一个对象来设置基本路径。基本路径的设置可以影响到应用中的路由和其他资源的加载。
Angular 2中的routerLinkActive是一个指令，用于在当前活动路由与指定的路由路径匹配时，为HTML元素添加一个活动状态的CSS类。它可以帮助我们在导航菜单或导航栏中高亮显示当前活动的链接。
使用routerLinkActive指令时，我们需要将其添加到HTML元素上，并通过属性绑定的方式指定要匹配的路由路径。例如，我们可以将routerLinkActive指令添加到导航菜单的链接上，以便在当前活动路由与该链接的路由路径匹配时，为该链接添加一个活动状态的CSS类。
以下是一个示例代码：
<nav>
<a routerLink="/home" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>
<a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>在上面的示例中，当当前活动路由与"/home"、"/about"或"/contact"中的任何一个路径匹配时，对应的链接将会添加一个名为"active"的CSS类。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云负载均衡（CLB）。
- 腾讯云云服务器（CVM）：提供可扩展的计算容量，用于部署和运行应用程序。详情请参考：腾讯云云服务器
- 腾讯云负载均衡（CLB）：用于将流量分发到多个云服务器实例，提高应用程序的可用性和性能。详情请参考：腾讯云负载均衡
请注意，以上推荐的腾讯云产品仅供参考，具体选择还需根据实际需求进行评估和决策。
相关·内容
我正在使用Angular 6，我遇到了一个关于导航菜单的问题。
当我点击一个子项时，在使用routerLinkActive时，只有子项被设置为活动的，而不是父项。
我想知道当我在Angular 6中选择它的子项时，如何将父项类设置为活动的？
假设我单击了Floor Maintenance，它是Services的子级。只有Floor Maintenance将设置为active，但不会设置为Services。我希望在单击它的任何子项时，使用routerLinkActive激活服务按钮。
导航菜单
<nav class="navbar navbar-expand-lg navbar-l
浏览 21提问于2018-10-19得票数 2
我有两条路线
{ path: '', component: DefaultComponent },
{ path: 'second', component: SecondComponent }
和html格式
<a [routerLink]="['/']" [routerLinkActive]="['active']">default</a>
<a [routerLink]="['/second']" [routerLinkActive]
浏览 1提问于2016-12-24得票数 0
1回答
当路线匹配时，我试图在按钮中添加活动样式。
下拉菜单元素正确地添加活动样式，但父元素没有此样式。
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li>
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expan
浏览 1提问于2019-07-18得票数 1
回答已采纳
2回答
我已经阅读了mat-tabs上有关angular材料的文档。mat -tab的基本概念非常容易理解，但在mat选项卡中使用路由的概念有些令人困惑。
下面是通过使用<nav mat-tab-nav-bar>在mat-tab中使用路由的示例
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[
浏览 17提问于2018-01-16得票数 1
在angular2中，子路由面临的问题是如何突出主动路由。我知道父母的路由我们可以用
routerLinkActive="active"
但是，在子路由的情况下，我必须同时突出强调父路由和子路由。怎么做？
从这里引证
浏览 0提问于2016-08-08得票数 4
我使用的是Menu组件。我需要让它，如果从菜单中的一些链接是活动的，那么按钮也应该成为活动的，也就是说，在一些颜色。该怎么做呢？
<button mat-button [matMenuTriggerFor]="menu" routerLinkActive="active">
Directories
<mat-icon>expand_more</mat-icon>
</button>
<mat-menu #menu="matMenu">
浏览 6提问于2019-10-21得票数 0
回答已采纳
1回答
我有一个简单的组件，如下所示，我试图从活动元素的模板中获得对它的引用。
export class SidebarComponent {
@ViewChildren(RouterLinkActive) linkItems: QueryList<RouterLinkActive>;
ngAfterViewInit() {
let activeLink = this.linkItems.find(item => item.isActive);
console.log('Active link is');
console.log(a
浏览 4提问于2017-04-27得票数 0
我提供了一个简单的路由示例，效果很好。唯一的问题是，无论哪个链接是活动的，routerLinkActive都在添加类'baboossa‘。当我从家里到其他链接时，比如“关于”或“窗口”，链接就会变成橙色(由于baboossa类)，但我仍然可以看到家也是橙色的。为什么现在我有两个链接添加了类从routerLinkActive和类没有被从家里移除？
app.component.html
<ul>
<li><a [routerLink]="''" routerLinkActive="baboossa">H
浏览 0提问于2018-09-18得票数 3
回答已采纳
我使用的是角7和PrimeNg版本"7.1.0-rc.1“。目前，我正在尝试集成PanelMenu组件，但由于routerLinkActive不可用，无法为活动选项卡设置样式。我还有其他方法可以做到这一点吗。谢谢
浏览 0提问于2019-03-18得票数 1
7回答
我正尝试在我的Angular 7应用程序中使用带有href的锚标签。当我点击链接时，浏览器中的url会改变，但是页面不会被导航到。如果我把target=写成“_self”，它就能工作。
<a href="/abcd" target="_self">Abcd</a>
但是，这并不只是浏览器中的url发生了变化，而是什么也没有发生。
<a href="/abcd">Abcd</a>
就像我使用Angular routing和RouterLink一样，它可以工作。
<a routerLink=
浏览 7提问于2019-09-24得票数 24
我使用的是具有引导带4的角2。我可以使用以下代码更改活动选项卡：
navbar.component.html
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar">
☰
</butt
浏览 2提问于2016-09-16得票数 7
回答已采纳
成功登录后，重定向至lochalhost:4200/feature。我想在此状态下激活“仪表板”链接。当我点击仪表板时，测试套件和日志链接工作正常。
<li routerLink="dashboard" [ngClass]="{'active': router.isActive('feature')}" routerLinkActive="active">
<i class="img-sprite dashboard-icon"></i>
浏览 4提问于2020-02-20得票数 0
我试图在角6中向routerLink添加active类。我的sidnav组件由所有routerLinks组成。点击路由器链接后，特定的链接应该是活动的，并且特定的组件应该出现。我尝试使用焦点css，当我点击链接2 times.May时，它是工作的，因为我在票据到组件中使用了sidenav选择器。
sidenav组件html代码：
<li ><a [ngClass]="{'red-input':clicked}" routerLink="/bill-to" routerLinkActive="red-input"
浏览 0提问于2018-08-16得票数 0
回答已采纳
我有一个带有几个routerLinks的应用程序，我用[routerLinkActive]="['active']"设计了它们的样式。当我单击其中一个routerLinks进行导航时，一切工作正常。当我使用以下命令导航时：
this._router.navigate( [ thisUrl ], {queryParams: queryParams } );
routerLinkActive停止工作。有人知道如何解决这个问题吗？
我使用的是angular2 2.4.1
浏览 0提问于2016-12-27得票数 4
我在html文件中使用routerLinkActive="active"和routerLink=[myId]来突出显示ul中的活动锚点。
示例：
<a [routerLink]="[myId]" class="list-group-item clearfix" routerLinkActive="active">
<div class="pull-left">
<h4 class="list-group-item-heading">{{someName
浏览 1提问于2017-01-29得票数 2
运行Angular 8。我的主导航有一组链接，例如/services。在该页面上是服务。当用户点击"Production“时，它会转到url /services/production，然而，"Services”nav项将失去其活动状态。
我已经应用了[routerLinkActiveOptions]="{exact: false}"来尝试在不精确的路由上强制执行活动类，但它没有保持活动状态。
这些服务的路由都在各自的目录中，所以“服务”有一个services-routing.module来处理它的路由。但是，导航链接是根/app级别的。
我认为我需要将这些路由加
浏览 0提问于2020-04-17得票数 0
我在angular 8中的routerLinkActive属性遇到了问题。当在ng模板中使用该属性呈现链接时，当链接处于活动状态时，routerLinkActive类不会应用于父元素。也就是说..。
<div routerLinkActive="active2">
<ng-container [ngTemplateOutlet]="test" [ngTemplateOutletContext]="{link: '/home', name: 'Home'}"></ng-contain
浏览 7提问于2019-07-26得票数 0
我在每个链接上使用angular2和angular2 routerLinkActive来设置活动链接。一切都很好。当用户单击链接时，路由变为活动，链接得到注入的“活动”类，我可以相应地进行样式设置。
但是，在路由设置中，我设置了一个默认路由，如下所示：
const routes: Routes = [
{ path: '', redirectTo: 'gettiingstarted', pathMatch: 'full' },
这可以在用户首次导航到页面时成功地加载"gettingstarted“组件，但不幸的是，路由器链路目前还没有注入
浏览 4提问于2017-04-24得票数 5
回答已采纳
我的导航就像这样
<nav>
<ul class="nav nav-list">
<router-link tag="li" to="/"><a href="#">Home</a></router-link>
<router-link tag="li" to="/page1"><a href="#">Page1</a></rou
浏览 2提问于2017-08-10得票数 8
回答已采纳
1回答
我有三个肚脐的家，联系和产品。routerlinkactive对于联系人和产品链接都很好，但是主页链接总是活跃的为什么？
app.component.html
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>
navbar.component.html
<li routerLinkActive="active"><a routerLink="/">Ho
浏览 0提问于2018-01-21得票数 1
回答已采纳
我使用的是Angular2 RC3和新路由器。我的HTML ..。
<nav>
<a [routerLink]="['/route1']" [routerLinkActive]="['active']">Route 1</a>
<a [routerLink]="['/route2']" [routerLinkActive]="['active']">Route 2</a>
</nav>
r
浏览 1提问于2016-06-30得票数 2
回答已采纳
我有这样的联系
<li routerLinkActive="active" class="nav-item">
<a [routerLink]="['contracts']"
[queryParams]="{ activeOnly: false }"
class="nav-link">Contracts</a>
</li>
你看，在平行线中，我有?activeOnly=false，用这种方法，当我的url是这样的时候，一切都好
在html中添加了c
浏览 1提问于2019-09-16得票数 1
1回答
在我感到困惑之后，我试着写了一个简单的路由练习。当我使用实现我的代码时，我看到有两个按钮，即使我的路由器元素中没有按钮。但是当我在没有路由器插座的情况下实现时，我在屏幕上看到了正确的1个按钮。 这是我的样品； app.component.html： <div>
<button type="button" class="btn btn-outline-secondary"><a
routerLink="./elements"
routerLinkActive="active"
浏览 32提问于2021-01-20得票数 1
回答已采纳
Angular js 2路由正在发生，但url中没有任何变化。
万岁，
我是angular js2的新手，我已经用三个标签创建了路由示例，它们是angular js2中不同类型的表单。1.模板驱动2.模型驱动3.用表单生成器驱动模型
问题是当我单击另一个选项卡文件内容更改，但url，验证不起作用
我已经在github上传了全部内容，如果有人也帮我清理代码，我会很高兴。我也在寻找那个表单模板的贡献者
提前感谢这里是app.component.ts中路由的代码
<nav>
<a routerLink="/angulartemplatefo
浏览 1提问于2017-04-13得票数 0
所以，我在一页上有菜单。我有routerLinkActive属性，如果链接是活动的，它应该添加一个绿色背景。如果不活动，它应该是灰色的。问题是，即使添加了bg-success类，它也不会覆盖bg-dark类。
我的问题是，你们知道我该怎么做吗？我可以选择进入并修改引导文件，并从"!important"中删除bg-dark，但我不想搞砸它。
也许是有角度的东西，比如routerLinkNotActive，这样我就可以交换类了。
<a class="list-group-item bg-dark text-light" [routerLink]="&#
浏览 0提问于2018-08-01得票数 2
回答已采纳
我想删除我特意设置为活动的列表项目的活动类，这样当页面加载时，我希望这个列表项目使用routerLinkActive=" active“保持活动。当我在angular中选择列表中的其他项目时，我想禁用此活动类 我试着使用ngClass，但没有像预期的那样工作。如果不使用jquery，如何做到这一点？ <ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" [ngClass]="{'
浏览 17提问于2019-09-10得票数 1
回答已采纳
我使用routerLinkActive属性根据当前显示的页面更改菜单项的背景色。这是我的MenuItem组件的HTML：
<div class="menu-item" routerLinkActive="active">
<my-icon name="{{ iconName }}"></my-icon>
<a routerLink="{{ routerLink }}">{{ title }}</a>
</div>
在使用这个组件时，我必须传递route
浏览 11提问于2022-04-18得票数 2
回答已采纳
我尝试在以下情况下使用routerLinkActive
'./ path1‘链接path1应处于活动状态。
‘./ path1 ?param1=70000²m2=test2’链路path1应处于活动状态。
'./path1/ path2‘链路path2应处于活动状态。
<a [routerLink]="./path1" [routerLinkActiveOptions]="{ exact: true }"
[routerLinkActive]="['active']">My link</a&
浏览 0提问于2017-02-02得票数 4
1回答
我有mat选项卡角app.And，我想动态地获得链接并传输到navLinks对象。我做了，但是给id参数以'./1‘这样的字符串并不好，但是我做了连接，但它不工作(我检查了连接是正确的)。
TS文件
export class CarsComponent implements OnInit {
navLinks: any[];
public href: string = "";
activeLinkIndex = -1;
mySubject;
ngOnInit(): void {
this.href = this.router.url;
浏览 0提问于2019-09-12得票数 0
我正在学习角2中的路由，在我的根应用程序组件中，我使用template配置属性来显示视图中的导航链接。
app.component.cs
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div style="padding:5px">
<ul class="nav nav-tabs">
浏览 0提问于2017-11-16得票数 1
我的问题是当我单击其他路由器链接时，路由器链接的类别 <div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']">Dashboard</div> 仍然是活动的，所以我有2个活动的类链接。 app-routing.module.ts {
path: '',
component: SidebarComponent,
children: [
浏览 29提问于2020-03-16得票数 4
回答已采纳
1回答
在这里，我使用angular 2和angular材质在我的应用程序中创建菜单栏。我已经创建了组件之间的路由。我还提供了菜单栏上的每个选项的routeLinkActive。
这是我的菜单栏代码，
<mat-nav-list>
<button mat-button routerLink='Espace/home' routerLinkActive="active" ><mat-icon>home</mat-icon> Home</button>
<button mat
浏览 2提问于2018-01-17得票数 0
1回答
当改变路线时，行为主体变成零
、、、、
我正在尝试设置一个检查，以确保在我的header组件中对用户进行了身份验证，以授予对只对登录用户可用的路由的访问权限。但是，当我登录后尝试使用其中一条路由时，它将将我的用户行为主题更改为null，从而使我的isAuthenticated变为false。我不知道这里发生了什么，因为我也没有收到错误。
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from
浏览 11提问于2022-05-02得票数 2
回答已采纳
我正在使用按钮组，当我添加queryParamsHandling="preserve"时，[routerLinkActive]="['active']"不工作。我使用的是Angular 5.0.4。
代码如下：
<div class="btn-group" role="group">
<button [routerLink]="['route1']" [routerLinkActive]="['active']" queryP
浏览 4提问于2018-02-23得票数 0
routerLinkActive有一个Angular2指令，如果路由是活动的，它将类添加到元素中。当路由是非活动时，我想添加一个类。有办法这样做吗？
浏览 5提问于2017-02-01得票数 9
回答已采纳
6回答
我有一个mat-tab-nav-bar导航栏为我的网站，但mat-tab-link蓝色下划线栏不追逐活动按钮。它只停留在第一个按钮上，不动。虽然在背景颜色变化的意义上，这些按钮确实变成了活动状态，并且它们很好地路由到了相应的页面。
这是app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./
浏览 0提问于2018-05-13得票数 21
回答已采纳
请考虑以下几点：
<ul>
<li id="dashboard" data-ui-sref-active="selected">
<a data-ui-sref="home">Dashboard</a>
</li>
<li id="jobs" data-ui-sref-active="selected">
<a data-ui-sref="home.fo
浏览 3提问于2016-07-28得票数 1
回答已采纳
我一直在搞角质2，被卡住了。首页列出了要学习的主题(TopicsComponent)，.Clicking将触发路径：'**‘。PageNotFoundComponent也使用TopicsComponent来显示主题，但是routerLink不再工作了。
例如:在首页，当我单击angular2链接时，我会得到url /angular2。但是当/angular2/(angular2)活动时，我得到url PageNotFoundComponent
以下是代码：
main.ts
import { bootstrap } from '@angular/platform-brows
浏览 0提问于2016-08-16得票数 1
回答已采纳
我目前正在使用angular2和material2。当我的routerLinkActive处于活动状态时，我的目标是将md-按钮更改为md-引发按钮.例如，如果我是在"/todos"，我希望“md-按钮”指令被替换为“md-引发-按钮”。
我在网上找不到任何解决办法，我希望有人能指导我。我希望避免使用CSS类。
<a md-button routerLink="/" routerLinkActive="toolbar-active" [routerLinkActiveOptions]="{exact: true}">
浏览 2提问于2017-04-11得票数 1
回答已采纳
我正在做一个相当简单的项目，但是这个问题让我很困惑！
我有路由设置和正确工作，除了一个小问题，因为routerLinkActive没有保持激活。
我还不能在问题中嵌入图像，所以请按照链接查看我正在获得的结果
当我转到：时，'1‘菜单项在导航栏中正确显示为活动。如果然后转到一个子路由：，'1‘菜单仍然被设置为active。这正是我想要的结果。
但是，在一个非常类似的设置中，我将'4‘菜单项转到：。这正确地显示顶部导航栏中的'4‘为活动，’测试A‘按钮为活动。但是当我进入时，“Test”按钮正确地显示为活动，但是主导航栏丢失了它在'4‘上的活动标志。
附在
浏览 0提问于2018-11-12得票数 1
回答已采纳
2回答
角7号主动路线链接失去他的风格？
、、、、
我使用的是角7，我对routerLinkActive有问题。当我选择导航栏中的链接时，它会给.active类链接，但是当我点击页面上的其他地方时，链接就失去了他的风格，但是在控制台中，active类仍然是活动的。因此，如何保持活动类风格的网页链接，我所处。我做了这么多次，从来没有问题，尝试复制工作代码，但仍然没有进展。
app.module.ts
import { RouterModule } from "@angular/router";
RouterModule.forRoot([
{
path: "",
c
浏览 1提问于2019-02-24得票数 0
当我使用以下代码时，routerLinkActive可以工作，但它无法构建。
<a mat-button routerLinkActive="mat-raised-button [routerLink]="login">Inloggen</a>
当我使用下面的代码时，routerLinkActive不工作，但是构建成功了。
<a mat-button routerLinkActive="mat-raised-button" routerLink="login">Inloggen</a>
我如
浏览 1提问于2020-01-24得票数 0
1回答
出口的角默认路径
、、、
给定以下模块，如何创建路由，以便当应用程序加载此模块时，它将路由到CComponent，并将AComponent加载到指定的路由器出口search-results中
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AComponent } from &#
浏览 4提问于2018-01-16得票数 3
当使用routerLink和routerLinkActive将CSS应用到导航栏时，我还想包含fragment信息，以便在主页中的部分中链接是唯一的。
我试过使用[routerLinkActiveOptions]="{ exact: true }"来解决任何运气问题。
导航条形码的相关部分是：
<li routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">
<a routerLink="/sitio" f
浏览 1提问于2016-12-30得票数 15
回答已采纳
2回答
我有一个包含以下路由的项目：
{ path: '', component: GamesListingComponent },
{ path: 'inicio', component: HomeComponent },
{ path: 'listar',
children: [
{ path: '', component: HomeComponent },
{ path: 'fabricantes', component: Manuf
浏览 3提问于2017-05-30得票数 5
回答已采纳
2回答
我正在创建一个登录应用程序，其中用户必须登录和登录后，如果用户是有效的，他需要重定向到给定的页面。
登录和重定向工作。
问题：在登录页面中，我的侧导航菜单也是可见的。它只应显示在其他路线上。
App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginCom
浏览 0提问于2018-03-05得票数 0
我有以下导航栏：
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active" data-toggle="tab" routerLink="/home" routerLinkActive="active">
<i class="fa fa-lg fa-home"></i> Home
</a>
浏览 13提问于2020-02-04得票数 0
1回答
这里是我的问题--，我创建了一个带有RouterLink指令的导航栏，我希望我的导航链接能够活动到当前的URL路径，所以我使用了RouterLinkActive指令。但是我的CSS活动类没有更新到任何URL路径。我也不知道原因。这个问题有什么解决办法吗？
这里是我的代码
导航栏：app.component.html
<nav class="header-links">
<img src="../assets/images/logo.png" alt="" class="logo">
浏览 7提问于2021-02-28得票数 0
RouterLinkActive在单元测试期间不起作用，但在外部单元测试时起作用。 下面是HTML： <header class="site-tab">
<nav class="c-tab l-wrap">
<div
class="c-tab__item"
routerLink="/companies"
routerLinkActive="c-tab__item--active"
>
<p class=&
浏览 22提问于2020-03-31得票数 0
回答已采纳
我在Angular (版本5)中遇到了一个特殊的问题，我在angular中设置了一些路由，如下所示：
{path: 'calendar', canActivate: [AuthGuard], component: ProjectsComponent }
{path: 'map', canActivate: [AuthGuard], component: MapComponent }
然后，在我的网页标题中，有一些按钮可以激活这些路由。
<li routerLinkActive="active"><a [routerLink]
浏览 0提问于2018-05-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
