问题标签 [routerlinkactive]

我正在做一个相当简单的项目，但这个问题让我很难过！

我有路由设置并且工作正常，除了 routerLinkActive 没有保持激活的一个小问题。

我还不能在问题中嵌入图片，所以请点击链接查看我得到的结果

路由结果

当我转到：http://localhost:4200/1时，“1”菜单项在导航栏中正确显示为活动状态。如果我然后转到子路由：http://localhost:4200/1/top100 '1' 菜单仍然保持设置为活动状态。这正是我希望它工作的方式。

然而，在一个非常相似的设置中，我将“4”菜单项转到：http://localhost:4200/2/A。这正确地将顶部导航栏中的“4”显示为活动状态，并将“测试 A”按钮显示为活动状态。但是，当我转到http://localhost:4200/2/B时，“测试 B”按钮正确显示为活动状态，但主导航栏在“4”上丢失了活动标志。

下面附上代码片段：

导航栏

按钮组

路线

我无法弄清楚这两个例子之间的区别。如果有人有任何见解或工作演示来实现我所追求的，那就太好了。

谢谢大卫

当我重新加载/刷新我的应用程序时，会显示菜单栏中的路线，并且所有项目都设置为active. 我已为路线配置：

在我的菜单栏中，我将代码简化为以下内容：

其中包括我的路线两次 - 几乎相同 - 除了第二个代码动态生成项目。第一个在刷新后正确选择项目，而第二个失败。

根据文档 routerLink可以用作字符串

任何人都可以解释为什么第二个失败？

编辑： 按要求提供图片

但是我选择了另一个链接后内容还是一样！比所有链接都正确呈现！

编辑2

我能够重现该错误。主要问题是评估routerlink太晚了，我遇到了同样的问题，就像已经报告的错误一样。

我当前的解决方法：最初设置userName：-/

我有一个 Angular 6 应用程序，它有一个标题组件。该标题中的一个链接包含另外 4 个组件。这意味着当我单击该链接时，第一个组件被加载并且路线是 /steps/step-one（主页的路线和其他页面的路线没有/steps/... Steps 组件包含 4 个组件，导航带有*ngIf.

我用来routerLinkActive向用户显示活动页面。当用户单击包含 4 个组件的链接时，他可以看到他在步骤页面上，并且 URL 中的路线是/steps/step-one。但是在那个页面上有一个按钮可以导航到/steps/step-two然后活动链接消失了。

我能做些什么来解决这个问题？

应用步骤.ts：

我使用带有侧边栏和标签的角度材料创建了一个页面。
我使用角度 7。
这是示例图像->

示例图像：

当我导航到内容选项卡时，is-active类不再适用于侧边栏中的选定组（无突出显示）。它共享相同的路径。当我们导航到内容选项卡时，应该突出显示组。我尝试了几种方法，但我仍然无法实现。
这是我的代码：

应用程序.html

应用程序.ts

app.routing.ts

我有一个导航菜单。当我打开它时，按钮/链接 Gebruikers(users) 总是表现为一个活动列表项，但它不应该。

这是我的 HTML，它位于 mat-nav-list 中，*ngf 正在检查用户是否应该看到链接。

我尝试使用 routerLinkActive="active-list-item"，但结果相同 + 其他链接没有得到 active-list-item 类。

那么如何更改默认情况下未选择链接 Gebruikers，或者如何使 routerLinkActive 工作？

我无法使活动按钮（路由器链接标签）亮起。

这是我的代码：

当我打印出来时，$route.path它会返回正确的路径，并且button.path是我在数据对象中拥有的数据，并且它可以工作。所以条件应该是对的。但是'is-active'类没有被激活。（这个线程：VueJS 精确主动类）

如果我对课程进行硬编码'is-active'，它就可以工作。

当我使用a:hover, a:visited, a:link它时，它可以工作，但a:active不起作用：D。我已经尝试过a:router-link-active，但它不起作用。（此线程：如何 VueJS 路由器链接活动样式）

我已尝试按照建议添加linkActiveClass: 'is-active'文件/router/index.js。这没用。（本帖：Bulma navbar and VueJS router active link）

有人知道为什么吗？或者有更多建议？先感谢您！

我有一个侧边栏，其中有多个选项。我将routerLinkActive类设置为在单击时使特定选项处于活动状态，但现在如果我从该路线走得更深或其他路线，活动类将被删除。我想保持一个选项处于活动状态对于多条路线。我的 HTML 代码如下所示。

正如您在第一张图片中看到的那样，该路线['/']的活动课程运行良好，但在第二张图片中，该路线['project/create']没有显示活动课程。我想为两条路线保留活动课程。请帮我解决这个问题。谢谢

我的路由文件是这样的。

['project/create']在 multistepform 组件中，它有自己的路由文件。

构建一个 Angular 4 应用程序，但我会接受一个也适用于 v5+ 的答案。我有一个由导航按钮组成的导航栏，如下所示：

我知道我可以根据当前路由是否与按钮匹配，向元素添加一个自定义类“活动”routerLink：

但是，我需要一种基于此条件（路由是否为当前）绑定输入值的方法，例如：

所以这个想法是如果按钮是指当前路线，inputFlag则将设置为。我知道这可以通过注入和构建一个函数来完成，该函数采用按钮的值并在它与当前路由匹配时返回。truerouterLinkActivatedRouterouterLinktrue

不过，这是很多开销；想知道 Angular 是否公开了一个 API 来在模板中完成所有这些工作

我有一些这样的链接

您在 params 中看到我有?activeOnly=false使用这种方法，当我的网址像

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

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

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

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

活动的 css 类也必须留在LI html 标签上