如何使用 angular2 在单击该选项卡时激活该选项卡答案

【问题标题】：how to make the tab active on click of that using angular2如何使用 angular2 在单击该选项卡时激活该选项卡
【发布时间】：2018-06-28 10:55:49
【问题描述】：

我有 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')])
  }

【问题讨论】：

不能在路由上启动功能吗？为什么点击？
在 id 中，我正在传递 cookie.get 值，我使用了这个但没有用 [routerLink]="['/admin/patient-info/', Cookie.get('AdminPatientId') ]"
错误是什么？这是您应该如何使用 routerLink 的推荐方式
ERROR TypeError: Cannot read property 'get' of undefined，这是我得到的错误
表达式 Cookie.get... 不会在 HTML 中计算。您可以添加 {{}} 或使用直接绑定 - 请参阅我的答案。

标签： angular routing angular2-routing

【解决方案2】：

直接绑定patientId即可：

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

HTML：

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

TS：

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

或者使用isActive的方法：

HTML：

<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>

TS：

import {Router} from '@angular/router';

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

isActive(instruction: any[]): boolean {
  // Set the second parameter to true if you want to require an exact match.
  return this.router.isActive(this.router.createUrlTree(instruction), false);
} 

patientinfo(){
  this.router.navigate([patientInfoRoute,getPatientIdFromCookie()])   
}

【讨论】：

不，即使这样也行不通，因为这里的 cookie 值会在刷新或第二次点击后更新
所以您在网站加载时还不知道 patientId？您能否使用固定的 patientId 测试代码，以确保该方法至少有效。也许在你的情况下 cookie 被滥用了？
这里，如果我全局声明实例并尝试获取 iD，则错误存在，但如果我直接在点击事件中获取 cookie，它可以工作