Angular bootstrap, как сделать карту из колоды карт активной, когда routerlinkactive - true - PullRequest
Новая
       21

Angular bootstrap, как сделать карту из колоды карт активной, когда routerlinkactive - true

0 голосов
/ 04 ноября 2019

Я использую Angular 7 + Bootstrap. Я использую колоду карт начальной загрузки, чтобы создать 3 меню. Когда активен routerlinkactive, я хочу стилизовать границу для этой конкретной карты, где ссылка доступна. 

<div class="container-fluid">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow"> <!-- want to style at this level when link is active -->
      <div class="card-header pb-2">
        <h4 class="my-0 font-weight-normal">Menu 1</h4>
      </div>
      <div class="card-body">
        <a routerLinkActive="active" routerLink='my-courses' class="link-unstyled">
          <i class="fas fa-tasks fa-9x"></i></a>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header pb-2">
        <h4 class="my-0 font-weight-normal">Menu 2</h4>
      </div>
      <div class="card-body">
        <a routerLinkActive="active" routerLink='completion-certs' class="link-unstyled">
          <i class="fas fa-award fa-9x"></i></a>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header pb-2">
        <h4 class="my-0 font-weight-normal">Menu 3</h4>
      </div>
      <div class="card-body">
        <a routerLinkActive="active" routerLink='self-certification' class="link-unstyled">
          <i class="fas fa-book-reader fa-9x"></i></a>
      </div>
    </div>
  </div>

</div>

1 Ответ

1 голос
/ 04 ноября 2019

Вы можете использовать что-то вроде этого. 

<a #rla="routerLinkActive" routerLinkActive="active" routerLink='my-courses' class="link-unstyled">.... </a>

и на карте div вы можете использовать [class.active-card]="rla.isActive"

...