Question

我有4个选项卡，单击每个选项卡时，如果该选项卡处于活动状态，则将其突出显示。但是对于我曾经使用过(click)事件的一个标签，所以我无法使该标签处于活动状态。因此，有人可以帮助我，如何在单击该功能时激活该功能。

HTML：

<a  id="AminManage" class="list-group-item justify-content-between" (click)="patientinfo()"  routerLinkActive="active">
  <span>
    <i class="icon-home"></i>Patient Information</span>
</a>

我也使用了[routerLink]="['/admin/patient-info/', Cookie.get('AdminPatientId')]"，但是没有用。

此处不支持routerLinkActive="active"，因此无论如何都可以使其工作。请帮忙。

Ts：

patientinfo(){
    this.router.navigate(['/admin/patient-info', Cookie.get('AdminPatientId')])
  }

Answer 1

在Patientinfo（）函数中，您可以编写逻辑以在锚标记上添加routerLinkActive =“ active”。

我希望这会对您有所帮助。

Answer 2

只需直接绑定PatientId：

如果在HTML中未对表达式Cookie.get ...求值。您可以添加{{}}或使用直接绑定

HTML：

namespace MyApp.Models.StatsViewModels
{
    public class LegacyStatViewModel
    {
        public string Id { get; set; }

        public double Cpu { get; set; }

        public double Mem { get; set; }

        public string Version { get; set; }
    }
}

TS：

<a id="AminManage" class="list-group-item justify-content-between" 
   [routerLink]="[patientInfoRoute,getPatientIdFromCookie()]" />
   <span>
      <i class="icon-home"></i>Patient Information
   </span>
</a>

或通过 isActive使用方法：

HTML：

    private getPatientIdFromCookie() {
      return Cookie.get('AdminPatientId');
    }
    public patientInfoRoute = "/admin/patient-info/"

TS：

<a id="AminManage" class="list-group-item justify-content-between"  [class.active]="isActive([patientInfoRoute, getPatientIdFromCookie()]) />
   <span>
      <i class="icon-home"></i>Patient Information
   </span>
</a>

如何使用angular2单击以使选项卡处于活动状态

2 个答案: