Sidenav routerLinkActive is behaving weird.

Topic: Sidenav routerLinkActive is behaving weird.

skota pro asked 4 years ago

Expected behavior

Only once item should be selected. When i refresh i see only one item selected. But when i select another, previous item is still selected.

Actual behavior enter image description here

Resources (screenshots, code snippets etc.)

                    <!-- Collapsible link -->
                    <mdb-accordion-item *ngFor="let link of links" class="no-collase">
                        <mdb-accordion-item-head mdbWavesEffect [routerLink]="link.path" [routerLinkActive]="'active'">
                            <mdb-icon fas [icon]="link.icon"></mdb-icon> {{link.name}}
                        </mdb-accordion-item-head>
                    </mdb-accordion-item>

                </mdb-accordion>

Arkadiusz Idzikowski staff commented 4 years ago

Thank you for reporting this problem, we will take a closer look at that. Just to clarify - every accordion item have different routerLink path?

skota pro commented 4 years ago

Hi,

Its because mdb-ac-item-body is missing.

When I fixed that, 95% active is being applied properly.

If I navigate to a page by clicking nav item, it works fine. But if I navigate to different route through code, having this issue.

For example, in RouteGuard, if the user is not logged in, I am going to the login screen.At this point, 2 links are getting active.

This could be an Angular issue also?

If you have any suggestions, please provide me.

Arkadiusz Idzikowski staff commented 4 years ago

How exactly do you change the route programatically? I tested that with this.router.navigate(['/route_name']) method and active link was updated correctly.

Which 2 links were highlighted in this case? It might be necessary to add [routerLinkActiveOptions]="{exact: true}" to the item that points to home ('/') route.

Add comment

fartonheart free answered 4 years ago