组件的 RouterChildActive Observable<boolean>答案

【问题标题】：RouterChildActive Observable<boolean> for a component组件的 RouterChildActive Observable<boolean>
【发布时间】：2018-01-23 17:27:40
【问题描述】：

我们有包含一些子链接的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 方式非常笨拙，并且当路径发生更改时，父级硬编码绝对路径以检查是否完全相等，无法重用。

是否有可能以更好的方式做到这一点，或者是否应该创建一个问题来改进 Angular 中的路由器 API？

【问题讨论】：

标签： angular angular-router

【解决方案1】：

在文档中你有这样的东西：

<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 标签上设置活动链接类。

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>

【讨论】：