如何使用具有功能的routerlinkactive

Question

我有一个使用 routerlinkactive 的简单组件，根据函数的不同 returns，我想放置一种样式或另一种样式：

组件文件：

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 使用该样式，但是当我包含该函数时，它没有给出错误但不绘制 class

Answer 1

将其包装在 []

中

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's website about template syntax

如何使用具有功能的routerlinkactive

How to use routerlinkactive with a function

angular-routing

angular