как сделать вкладку активной при нажатии на нее, используя angular2 - PullRequest
Новая
       23

как сделать вкладку активной при нажатии на нее, используя angular2

0 голосов
/ 28 июня 2018

У меня есть 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')])
  }

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Просто свяжите пациентаId напрямую:

Если выражение 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()])   
}
0 голосов
/ 28 июня 2018

Внутри функции Patientinfo () вы можете написать логику для добавления routerLinkActive = "active" к тегу привязки.

Надеюсь, это поможет вам.

...