角引导程序，当routerlinkactive为true时如何使卡座的卡处于活动状态

Question

我正在使用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>

Answer 1

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

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

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