显示div * ng如果路由器处于活动状态

Question

只要我们在该活动页面中，我就会尝试在导航栏中的每个链接下显示一个div。我正在使用* ngFor

遍历每个链接

我需要的是这样的

但是我得到的是：

这是我的代码：

component.html

<li class="nav-item mx-1" *ngFor="let link of links">
  <a class="nav-link" routerLinkActive="active" [routerLink]="link.url" [routerLinkActiveOptions]="{ exact: true }">
  {{link.nombre}}
  </a>
  <div *ngIf="getRouteActive()" class="bg-primary" style="height: 4px;"></div>
</li>

component.ts

getRouteActive() {
  return this.router.url === '/item1';
}

Answer 1

您可以将url作为参数传递给函数。

getRouteActive(url) {
      // I assume your url has a forward slash already
      return this.router.url === url;
    }

然后在您的template

中

<li class="nav-item mx-1" *ngFor="let link of links">
      <a class="nav-link" routerLinkActive="active" [routerLink]="link.url" [routerLinkActiveOptions]="{ exact: true }">
      {{link.nombre}}
      </a>
      <div *ngIf="getRouteActive(link.url)" class="bg-primary" style="height: 4px;"></div>
</li>

那应该给您想要的结果。

Answer 2

或者，使用CSS：

.nav-item {
    div {
       display: none;
    }

   .active + div{
       display: block;
   }
}