Angular bootstrap 如何在 routerlinkactive 为 true 时使卡片组的卡片处于活动状态

Question

我正在使用 Angular 7 + 引导程序。 我正在使用引导卡片组创建 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>

Answer 1

你可以使用这样的东西。

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

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