Question

我有一个使用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会使用该样式，但是当我包含该功能时，它不会出错但不会绘制类

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

1 个答案: