Question

我们的 AccountComponent 包含一些子链接。我们希望在孩子活跃时隐藏这些子链接。现在看来我们可以通过两种方式实现这一目标：

routerLinkActive并检查每个上面的isActive以隐藏CSS：

<style>
  .content {
    &.child-active {
      .links {
        display: none;
      }
    }
  }
</style>

...

<div class="content" [class.child-active]="linkProfile?.isActive || linkSettings?.isActive">

  <div class="links">
    <a [routerLink]="['./profile']" routerLinkActive="active" #linkProfile="routerLinkActive">Profile</a>
    <a [routerLink]="['./settings']" routerLinkActive="active" #linkSettings="routerLinkActive">Settings</a>
  </div>

  <router-outlet></router-outlet>

</div>

硬编码当前的父路线并检查它是否完全有效：

@Component({ ... })
export class AccountComponent {
  isParentActive$ = this.router.events
    .pipe(
      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
      map(() => this.router.isActive('/account', true)),
    );
}

...

<div class="content">

  <div class="links" *ngIf="isParentActive$ | async === false">
    <a [routerLink]="['./profile']">Profile</a>
    <a [routerLink]="['./settings']">Settings</a>
  </div>

  <router-outlet></router-outlet>

</div>

由于显而易见的原因，CSS方式对我来说非常hacky，并且当它的路径发生变化时，不能通过硬编码检查确切相等性的绝对路径。

是否有可能以更好的方式执行此操作，或者是否应该创建问题以改进Angular中的Router API？

Answer 1

在文档中你有类似的东西：

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

如果网址是＆＃39; / user / jim＆＃39;这将在div标记上设置active-link类。或者＆＃39; / user / bob＆＃39;。

https://angular.io/api/router/RouterLinkActive

或者您可以尝试这样做，如果您想完全删除它（需要测试它并不完全确定它是否有效）

<div ngIf="stuff.isActive" routerLinkActive="active-link" #stuff="routerLinkActive">
   <a routerLink="/user/jim">Jim</a>
   <a routerLink="/user/bob">Bob</a>
</div>

您也可以尝试简化它（如果没有ChangeDetectionStrategy.OnPush）：

<div *ngIf="router.isActive('/account', true))">...</div>

RouterChildActive组件的Observable <boolean>

1 个答案: