如何在Angular 2中设置Bootstrap导航栏的"active"类?

25 浏览
0 Comments

如何在Angular 2中设置Bootstrap导航栏的"active"类?

在Angular 2中如何设置Bootstrap导航栏的\"active\"类?我只找到了Angular 1的方法。当我进入About页面时,将Aboutclass=\"active\"添加上,并将Homeclass=\"active\"移除。\n


\n谢谢。

0
0 Comments

问题的原因是要在Angular 2中设置Bootstrap导航栏的"active"类。解决方法是使用`[class.active]="router.url==='/about'"`来动态设置`li`元素的`active`类,并且在构造函数中导入`import {Router} from "/router"`并将其放入`constructor`中。如果遇到下拉菜单的情况,需要在适当的地方添加相应的代码。

0
0 Comments

问题原因:在Angular 2中设置Bootstrap导航栏的"active"类时,如果一个路由是另一个路由的子字符串,就会出现问题。会出现两个活动链接的情况。

解决方法:可以添加[routerLinkActiveOptions]="{exact:true}"来仅匹配精确的路由。


这个方法可以解决首页路由是空字符串的情况下一直显示为活动状态的问题。另外,如果在锚点标签中使用Angular指令而不是a标签,会导致点击链接外部(例如网页中央)导致li标签变为非活动状态。添加指令到a标签中可以解决这个问题。

[routerLinkActiveOptions]="{exact:true}"参数的作用是当用户在不同页面上时,阻止在['/']首页上激活活动类,因为它完全匹配路径。

这个解决方法非常完美,非常感谢!

0
0 Comments

问题的原因是用户在使用Angular 2中的Bootstrap导航栏时,想要设置当前活动的导航链接的样式为"active",但是对于如何设置这个样式感到困惑。

解决方法是使用Angular 2的3.0.0版本的组件路由器中的routerLinkActive指令。通过在导航链接的li标签上添加[routerLinkActive]="['active']",可以实现当当前路由与导航链接匹配时,自动添加样式类名"active"。

代码示例:


这样做的好处是可以方便地管理当前活动导航链接的样式,并且不需要额外的JavaScript代码。

这个解决方法非常简单且完美,得到了用户的赞赏。同时,还有其他用户提供了一些补充的方法,比如只为一个类添加routerLinkActive="active",这是一种更加优雅的Angular 2的做法。

总之,使用Angular 2的组件路由器中的routerLinkActive指令可以轻松地设置Bootstrap导航栏中当前活动导航链接的样式,这是一种完美的Angular 2的方式。

0