routerlinkactive

How to use “routerLinkActive” with query params in Angular 6?

由 ▼魔方 西西 提交于 2020-05-14 16:31:08
问题 I have a problem in Angular: I have three links, one of them has query params (due to using a resolver). If I click the first and the third link, the routerLinkActive is set. If I click the second link routerLinkActive is set too. But if I change the query parameter inside the component routerLinkActive gets unset. So, I need to ignore the query params. But how does it work? Can anyone help me? Here is my simple code: <div class="col-12"> <ul class="nav nav-pills nav-justified"> <li class=

How to use “routerLinkActive” with query params in Angular 6?

由 不问归期 提交于 2020-05-14 16:31:05
问题 I have a problem in Angular: I have three links, one of them has query params (due to using a resolver). If I click the first and the third link, the routerLinkActive is set. If I click the second link routerLinkActive is set too. But if I change the query parameter inside the component routerLinkActive gets unset. So, I need to ignore the query params. But how does it work? Can anyone help me? Here is my simple code: <div class="col-12"> <ul class="nav nav-pills nav-justified"> <li class=

Angular routerLinkActiveOptions

由 左心房为你撑大大i 提交于 2020-01-16 19:30:15
问题 I have some link like this <li routerLinkActive="active" class="nav-item"> <a [routerLink]="['contracts']" [queryParams]="{ activeOnly: false }" class="nav-link">Contracts</a> </li> You see here in params i have ?activeOnly=false with this approach all is ok when my url is like contracts?activeOnly=false active css class is added in html and user can see that it is active link The problem I have that sometimes url can be changed like this contracts?activeOnly=true&id=1 then active css does

Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?

由 那年仲夏 提交于 2019-12-22 17:48:34
问题 I'm using Angular 6 and I've ran into an issue regarding my navigation menu. When I click on a child-item, only the child item is set to active and not the parent when using routerLinkActive. I'm wondering how I could set the parent item class to active when selecting its child item in Angular 6? Lets say I click Floor Maintenance which is the child of Services. Only Floor Maintenance will be set to active but not Services. I'd like to have the Services Button active using routerLinkActive

Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?

由 强颜欢笑 提交于 2019-12-06 07:11:45
I'm using Angular 6 and I've ran into an issue regarding my navigation menu. When I click on a child-item, only the child item is set to active and not the parent when using routerLinkActive. I'm wondering how I could set the parent item class to active when selecting its child item in Angular 6? Lets say I click Floor Maintenance which is the child of Services. Only Floor Maintenance will be set to active but not Services. I'd like to have the Services Button active using routerLinkActive when clicking any of its child items. Navigation Menu <nav class="navbar navbar-expand-lg navbar-light bg

Angular 2 routerlink with multiple routes?

由 北城以北 提交于 2019-12-04 04:20:15
问题 I want to remove a class only one ONE route, (Or add a class on all BUT one route.) How is that possible? I have tried [routerLink] with multiple parameters to no avail: <div class='body-content' [routerLink]="['/fetch-data', '/counter']" [routerLinkActive]="['col-sm-9']" > <router-outlet></router-outlet> </div> Or, is there such a thing as [routerLinkNOTActive] or something similar like so: <div class='body-content' [routerLink]="['/home']" [routerLinkNotActive]="['col-sm-9']"> so, then it

Angular 2/4 - routerLinkActive not working properly

由 ⅰ亾dé卋堺 提交于 2019-12-03 15:14:11
问题 I have a problem with my routerLinkActive. Here is two Gifs to explain. First problem: When i start the app, none of the routerLinkActive give the class active. But if i click on a different route, that finaly works. When I click at first on the current route, the class isn't displayed. Here is my code: <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>

Angular 2/4 - routerLinkActive not working properly

由 时光毁灭记忆、已成空白 提交于 2019-12-03 05:50:30
I have a problem with my routerLinkActive. Here is two Gifs to explain. First problem: When i start the app, none of the routerLinkActive give the class active. But if i click on a different route, that finaly works. When I click at first on the current route, the class isn't displayed. Here is my code: <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> Here is the tree of my route. (in red the component called)

Remove class nuxt-link-exact-active or giving style css on it

由 为君一笑 提交于 2019-12-02 12:11:57
i want to give class active in each href based on current link. but now i have problem about remove class nuxt-link-exact-active or giving style on it, i my current template already has style .mainNav .nav-item.active .nav-link so all i need to do remove class nuxt-link-exact-active giving style nuxt-link-exact-active but i did number 2 but still not working this is my demo https://codesandbox.io/s/m3rpmrk0xj 来源： https://stackoverflow.com/questions/54029794/remove-class-nuxt-link-exact-active-or-giving-style-css-on-it

Why Angular2 routerLinkActive sets active class to multiple links?

由 北城以北 提交于 2019-11-29 01:01:10
I'm trying to implement routerLinkActive to my app but i'm facing the issue that it's sets class active to multiple links. Here's how i'm doing it <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> Here it's how it looks Here it's how it look in dev-tools And my address bar Am i missing something because i'm doing
订阅 routerlinkactive