Angular 9 routerLinkActive无法正常工作
Angular 9是一种流行的前端开发框架，它提供了丰富的功能和工具来构建现代化的Web应用程序。其中一个重要的功能是路由（router），它允许我们在应用程序中进行页面导航和路由管理。
在Angular 9中，我们可以使用routerLinkActive指令来为当前活动的路由链接添加样式。然而，有时候我们可能会遇到routerLinkActive无法正常工作的问题。以下是一些可能导致该问题的原因和解决方法：
- 路由配置错误：首先，我们需要确保路由配置正确。在Angular中，我们需要在app-routing.module.ts文件中定义路由。确保你已经正确定义了路由路径和组件，并且没有拼写错误。
- 路由链接未正确设置：确保你的HTML模板中的路由链接（routerLink）已正确设置，并且与路由配置中的路径匹配。检查是否有任何额外的斜杠或错误的路径。
- 激活样式类未正确应用：确保你正确地应用了routerLinkActive指令，并将其绑定到适当的样式类。例如，你可以将其绑定到一个CSS类，然后在样式表中定义该类的样式。
- 路由链接未在路由模块中注册：如果你的路由链接是动态生成的，确保它们已在路由模块中注册。这可以通过在路由模块中使用RouterModule的forChild方法来完成。
- 版本兼容性问题：确保你的Angular版本与使用的Angular路由版本兼容。有时候，不同版本之间的API可能会有所变化，导致一些功能无法正常工作。建议使用最新版本的Angular和相关的路由模块。
如果你遇到了routerLinkActive无法正常工作的问题，可以尝试按照上述步骤逐一排查。如果问题仍然存在，你可以参考Angular官方文档、社区论坛或搜索引擎来获取更多的帮助和解决方案。
腾讯云提供了一系列与云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。你可以访问腾讯云的官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
2回答
角2单元测试-无法读取未定义的属性“根”
unit-testing、angular
错误描述
角度版本: 2.3.1
我的单元测试无法创建组件--我知道这个问题与[routerLink]和[routerLinkActive]指令有关，因为从模板中删除它们允许测试创建组件。
模板
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="
浏览 3提问于2017-02-04得票数 6
回答已采纳
我正在使用按钮组，当我添加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
4回答
Angular2路由器链路不工作
angular、angular2-routing、angular2-template
我的路由器链路从根组件开始工作，如果我将链接移动到子组件，相同的链路将无法工作。柱塞代码显示工作连杆和非工作连杆。提前谢谢你。下面是不起作用的链接。
//our root app component
import {Component} from '@angular/core'
@Component({
selector: 'my-menu',
template: `
<div>
<a routerLink="/comp11" routerLinkActive="active"&
浏览 1提问于2016-11-12得票数 12
回答已采纳
2回答
根据Angular 4中的页面选择更改div的颜色
javascript、css、angular
我是Angular的新手，所以请耐心等待(或者，如果这很明显的话，请给我推荐相应的文档文章)
基本上，我的网站(对于所有页面)的结构是这样的：
导航(主页、关于、资源、联系人)
header-div
内容
页脚
我希望您单击的任何链接都会更改header-div的内容；现在，我将从更改背景颜色开始。例如，主页的页眉是蓝色的，关于是红色的，资源是绿色的，联系人是黄色的。
我开始做的事情是使用一个方法直接操作样式，然后单击链接上的listener
根据所单击的链接，我如何将类附加到div？
这是我的app.component.ts
import { Component } from '@a
浏览 1提问于2017-08-07得票数 0
回答已采纳
2回答
Angular 2 getting "Error: Cannot match any routes：''“
angularjs、angular
在我的Angular 2应用程序(RC4)中，当index.html打开时，我收到错误消息:无法匹配任何路由：'‘我知道以前有人问过这个问题，但这些情况下的答案似乎都不适用于我；也就是说，我已经在做所有推荐的事情来解决这个问题。
<base href="/">
在我的head元素中(也尝试过
<base href=".">
这完全没有区别)。我的app.route.ts中有以下内容：
export const routes: RouterConfig = [
{ path: '', redirectTo: &#
浏览 4提问于2016-07-21得票数 0
7回答
锚点href与角度布线链路
javascript、html、angular、angular-router
我正尝试在我的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
2回答
Angular App中的外部链接
angularjs、angular-routing
我正在将Angular整合到现有rails应用程序的单个页面中。
使用以下代码，页面内的路由一切都可以正常工作
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/services/:id', {
templateUrl: "/javascripts/angular/templates/service_ui/service.html",
controller: "ServiceCtrl"
浏览 0提问于2013-05-26得票数 3
回答已采纳
1回答
如何在angular 2路由器中隐藏路由？
javascript、angularjs、angular、angular2-routing
我在路由器3.0.0-rc.1上使用angular 2。请考虑本教程中的以下模板：
`
<nav>
<a routerLink="/crisis-center" routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">He
浏览 4提问于2016-09-14得票数 0
1回答
成功登录后如何激活[routerLinkActive]？
angular
我有一个包含多个子组件的父组件，您可以通过菜单导航到这些子组件。当用户尚未登录时，我希望该菜单中的按钮被禁用。
登录组件是主应用程序组件的子组件，因此它使用事件发射器来告诉主应用程序组件登录是否成功。但是，当我运行该应用程序时，我会收到一个错误声明：
ERROR TypeError: data.split is not a function
它还给了我一个编译器错误，如下所示：
ERROR in src/app/app/login/login.component.ts(14,3): error TS1240: Unable to resolve signature of property de
浏览 1提问于2017-12-01得票数 0
请描述您的问题
标题：产品体验 - 短视频 - 文档首页 - 腾讯云文档平台 - 腾讯云
地址：https://cloud.tencent.com/document/product/584/9365
浏览 260提问于2018-03-16
1回答
角路由器总是重定向到同一个模块。
angular、routing、angular2-routing
快把我逼疯了。我的应用程序模块中有3条简单的路线：
routes: Routes = [
{ path: '', redirectTo: '/customers', pathMatch: 'full' },
{ path: 'customers', loadChildren: './components/customer#CustomerModule' },
{ path: 'promotions', loadChildren: './components/promo
浏览 3提问于2017-09-11得票数 0
回答已采纳
6回答
角路由routerLinkActive类即使在其他链路路由中也不会从基页中删除
javascript、angular、angular-routing
我提供了一个简单的路由示例，效果很好。唯一的问题是，无论哪个链接是活动的，routerLinkActive都在添加类'baboossa‘。当我从家里到其他链接时，比如“关于”或“窗口”，链接就会变成橙色(由于baboossa类)，但我仍然可以看到家也是橙色的。为什么现在我有两个链接添加了类从routerLinkActive和类没有被从家里移除？
app.component.html
<ul>
<li><a [routerLink]="''" routerLinkActive="baboossa">H
浏览 0提问于2018-09-18得票数 3
回答已采纳
12回答
Angular routerLink不会导航到相应的组件
angular、angular2-routing
我在angular2应用程序中的路由工作得很好。但是我要做一些基于的routeLink
下面是我的路由：
const routes: RouterConfig = [
{ path:'home' , component: FormComponent },
{ path:'about', component: AboutComponent },
{ path:'**' , component: FormComponent }
];
下面是我创建的链接：
<ul class="nav navbar-nav
浏览 92提问于2016-08-08得票数 148
回答已采纳
1回答
出口的角默认路径
angular、angular-routing、angular-router、angular-router-loader
给定以下模块，如何创建路由，以便当应用程序加载此模块时，它将路由到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
1回答
创建具有多个父级的子页
angular、typescript、angular-router
我想在一个Angular应用程序中创建一个导航，在那里我可以从多个“父”页面访问同一个页面，并让导航知道它来自哪个页面。
我在我的导航上使用routerLinkActive="active"。我有两个显示用户列表的页面(收藏夹、所有用户)。用户有一个详细信息页面，您可以使用users/userId导航到该页面。
我想要做的是，当从“收藏”列表中单击用户详细信息链接时，“活动”导航停留在“收藏”菜单按钮上，而当我从所有用户中单击时，它停留在所有用户上
这就是我的路径当前的配置方式
const routes: Routes = [
{
path: 'favorites&
浏览 17提问于2019-07-25得票数 0
回答已采纳
1回答
当改变路线时，行为主体变成零
angular、typescript、rxjs、angular-router、angular-router-guards
我正在尝试设置一个检查，以确保在我的header组件中对用户进行了身份验证，以授予对只对登录用户可用的路由的访问权限。但是，当我登录后尝试使用其中一条路由时，它将将我的用户行为主题更改为null，从而使我的isAuthenticated变为false。我不知道这里发生了什么，因为我也没有收到错误。
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from
浏览 11提问于2022-05-02得票数 2
回答已采纳
1回答
将模块定义为“`services`”、“`factories`”是否有意义？
angularjs、module
在我们的一个角项目中，我们定义了一些模块，例如：
angular.module("services", [])....
angular.module("controllers", ['services'])....
angular.module("factories", [])....
然后根据它们制作一个主模块：
angular.module("app", ['services', 'controllers', 'factories'])
有些同事认为这种方式不好，
浏览 3提问于2014-09-15得票数 0
回答已采纳
4回答
路由器链路不适用于共享模块中的组件
angular、angular2-routing、routerlink
我编写了一个名为"Customer“的模块，它有几个组件，如登录、主页和注册。现在，我已经创建了一个共享模块，其中也有两个组件，如页眉和页脚。由于页眉和页脚将由客户模块中的所有组件共享，所以我将它们放在共享模块中。共享模块被导入到客户模块。
现在有一个路由器链接，它指向客户模块中的组件。那些路由器链路不会被解释为href。但是，如果我将这些页眉和页脚组件直接放在客户模块中，那么这些路由器链接就会被解释。
我已经包含了下面的代码片段。
共享模块文件
import { NgModule } from '@angular/core';
import { HeaderComp
浏览 6提问于2016-12-04得票数 25
回答已采纳
25回答
【开箱吧腾讯云】开发工具千千万，哪个最高效最好用？
腾讯云、产品、工具、开发、开发工具
开发工具千千万，哪个最高效最好用？
在关键时刻解决了你的卡点和痛点，欢迎你和我们一起分享你使用过的腾讯云宝藏工具！
点赞最高的前5名将获得猫王小王子花梨原木便携蓝牙音箱1个（截止时间：11月12日24:00）
另外在11月9日晚20:00-21:00
【开箱吧腾讯云】将迎来3位开发大神分享自身工具箱
快来腾讯云开发者视频号预约吧！更有超多双十一产品优惠等你！
图片
浏览 1746提问于2022-11-02
2回答
如何成功地路由到Angular中的其他组件？
javascript、html、angular、sass、routes
我对Angular非常陌生，但我正在尝试将一些路由纳入这个网站。默认屏幕是一个带有几个按钮的网格： export class InvestigationsComponent implements OnInit{ ec. } 有两个按钮，我想路由到他们自己的URL。我现在只专注于NewInvestigationComponent。 下面是按钮主体中的html： <div class="router-containers">
<button id="advancedsearch" (click)="advancedSear
浏览 28提问于2020-09-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
