Как использовать routerlinkactive с функцией - angular


0

У меня есть простой компонент, который использует routerlinkactive и, в зависимости от того, что возвращает функция, я хочу добавить тот или иной стиль:

Файл компонента:

import { Component, Input } from @angular/core;
import { Route, ActivatedRoute, Router, RouterLinkActive } from 
@angular/router;

@Component({
  selector: app-sel,
  template: 
   <a [routerLink]="routeUrl" routerLinkActive="esAplicacionCopiadoras() ? 
  colorCopiadoras : colorSolicitudes" ></a> 
  styleUrls: [./submenu.component.css]
})

export class NavItemComponent {
   private aplicacion:bool =true;
     esAplicacionCopiadoras() {
       if (this.aplicacion == "Copiadoras") {
           return true;
       }
       return false;
    }
}

Файл .css:

.colorCopiadoras {
    border-left: 1px solid #9fc4cb;
    color: #0d627a;
 }
.colorSolicitudes {
   border-left: 1px solid #989cbe;
   color: #6e43a9;
 }

Когда я удаляю функцию, routerlinkactive работает со стилем, но когда я включаю функцию, она не выдает ошибку, но не рисует класс

  •  61
  •  1
  • 11 май 2020 2020-05-11 10:17:14

1 ответ

4

Оберните это в []

import { Component, Input } from @angular/core;
import { Route, ActivatedRoute, Router, RouterLinkActive } from 
@angular/router;

@Component({
  selector: app-sel,
  template: 
   <a [routerLink]="routeUrl" [routerLinkActive]="esAplicacionCopiadoras() ? 
  colorCopiadoras : colorSolicitudes" ></a> 
  styleUrls: [./submenu.component.css]
})

export class NavItemComponent {
   private aplicacion:bool =true;
     esAplicacionCopiadoras() {
       if (this.aplicacion == "Copiadoras") {
           return true;
       }
       return false;
    }
}

Атрибуты, которые не заключены в [], оцениваются как строки. Вы должны поместить атрибуты в [], чтобы оценить выражения.

Более подробная информация на веб-сайте Angular о синтаксисе шаблонов

  • 11 май 2020 2020-05-11 10:17:15