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

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

1 голос
/ 17 октября 2019

У меня есть простой компонент, который использует 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;
    }
}

.cssfile: 

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

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

1 Ответ

4 голосов
/ 17 октября 2019

Обернуть его в []

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 о синтаксисе шаблона

...