RouterChildActive组件的Observable <boolean>-Java 学习之路

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

routerLinkActive and checking isActive on each of them to hide with 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>

Hardcoding current parent route and checking it's exactly active:

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

1 回答

0
在文档中你有这样的东西：
```
<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>
```
如果url是'/ user / jim'或'/ user / bob'，这将在div标签上设置active-link类 .

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>
```
回复于 2024-05-08T10:55:42+08:00

RouterChildActive组件的Observable <boolean>

1 回答

相关问题