На значке активной смены ссылки роутера

Question

<div class="menuItem mb-3" *ngFor="let menuItem of menuItems">
    <a routerLink="{{menuItem.link}}" routerLinkActive="active">
        <img src="{{menuItem.icon}}" alt="{{menuItem.name}}" />
        <p class="text-center f-12">{{menuItem.name}}</p>
    </a>
</div>

На роутере ссылка активная, хочу поменять {{menuItem.icon}} в {{menuItem.iconAtv}}

Answer 1

Попробуй это:

<a routerLink="{{menuItem.link}}" routerLinkActive="active"  #rla="routerLinkActive">
        <img src="{{rla.isActive ? menuItem.icon : menuItem.iconAtv}}" alt="{{menuItem.name}}" />
        <p class="text-center f-12">{{menuItem.name}}</p>
 </a>

Answer 2

Я также много искал, чтобы достичь такого типа функциональности, и, наконец, я получил это решение...

Нам просто нужно определить #dashboard="routerLinkActive"и тогда мы сможем получить isActiveв dashboardатрибут...

Просто проверьте приведенный ниже код с хладнокровием! :)

      <div class="top-tabs" id="app-sidebar-scrollbar">
    <div class="sidebar-item">
        <a class="sidebar-link" [routerLink]="['/worklists/dashboard']" routerLinkActive="active" #dashboard="routerLinkActive">
            <img [src]="dashboard.isActive ? 'assets/svg/sidebar-icons/dashboard-active.svg' : 'assets/svg/sidebar-icons/dashboard.svg'" />
            <span>Dashboard</span>
        </a>
    </div>
    <div class="sidebar-item">
        <a class="sidebar-link" [routerLink]="['/worklists/tasks-board']" routerLinkActive="active" #worklist="routerLinkActive">
            <img [src]="worklist.isActive ? 'assets/svg/sidebar-icons/goal-workflow-active.svg' : 'assets/svg/sidebar-icons/goal-workflow.svg'" />
            <span>Worklists</span>
        </a>
    </div>
    <div class="sidebar-item">

        <a class="sidebar-link" [routerLink]="['/assessment-requests/privacy']" routerLinkActive="active" #assessment="routerLinkActive">
            <img [src]="assessment.isActive ? 'assets/svg/sidebar-icons/assessments-active.svg' : 'assets/svg/sidebar-icons/assessments.svg'" />
            <span>Assessments</span>
        </a>
    </div>
</div>

Answer 3

можно попробовать так!

      <a routerLink="{{menuItem.link}}" routerLinkActive="active"  
#rla="routerLinkActive">
        <img src="{{rla.isActive ? menuItem.icon : menuItem.iconAtv}}" alt=" 
{{menuItem.name}}" />
        <p class="text-center f-12">{{menuItem.name}}</p>
 </a>

Answer 4

Внутри вашего HTML, если данный код выглядит следующим образом:

      <a mat-list-item *ngFor="let link of links" routerLink={{link.path}} routerLinkActive="active" >
   <img  [src]="router.url === ('/' + link.path) ? link.activeIcon : link.inactiveIcon"/>         
   <p>{{ link.label }}</p>
</a>

Внутри TS, дайте ниже:

      links: any = [{
 inactiveIcon:'assets/images/icons/master-navigation/home-inactive.svg',
 activeIcon:'assets/images/icons/master-navigation/home-active.svg',
 label: 'Home',
 path: 'network'
}] 
constructor(public router: Router) {}