Angular bootstrap 如何在 routerlinkactive 为 true 时激活卡片组的卡片

Question

我正在使用 Angular 7 + Bootstrap。我正在使用 bootstrap 卡片组创建 3 个菜单。当 routerlinkactive 处于活动状态时，我想为该特定卡设置边框样式，其中 link 可用。

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

Answer 1

你可以使用类似这样的东西。

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

在卡片 div 上你可以使用 [class.active-card]="rla.isActive"

Angular bootstrap 如何在 routerlinkactive 为 true 时激活卡片组的卡片

Angular bootstrap how to make card of a card-deck to be active when routerlinkactive is true

css

angular-bootstrap