Angular - routerLinkActive 和 queryParams 处理

Question

2021 年 3 月更新

Angular 团队终于为此合并了 PR，您可以查看https://github.com/angular/angular/pull/40303 了解更多详情。

要使用它，只需输入

<div routerLinkActive="active-link" [routerLinkActiveOptions]="options">
</div>

options 将具有 IsActiveMatchOptions 的形状

export declare interface IsActiveMatchOptions {
    fragment: 'exact' | 'ignored';
    matrixParams: 'exact' | 'subset' | 'ignored';
    paths: 'exact' | 'subset';
    queryParams: 'exact' | 'subset' | 'ignored';
}

或者简单地接受一个布尔值exact

{
   exact: boolean
}

原始问题

我在 Angular 中使用 routerLink，如下所示

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

所以当 URL 看起来像这样时，.active 类被添加到 li 标签中

/view/10?offset=0&numberOfItems=100

如果 URL 更改为 offset 或 numberOfItems 为不同的值，则 .active 类将被删除，例如。

/view/10?offset=0&numberOfItems=120

我浏览了angular docs 并设法通过添加另一个 routerLink 使其工作，但将其隐藏如下。

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
    <a [routerLink]="['/view', 10]" style="display:none;">                
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

似乎上述方法有点小技巧。当路由器参数带有可选查询参数时，我可以设置任何配置以使 routerLinkActive 工作吗？

Answer 1

我遇到了同样的问题，但根据 https://github.com/angular/angular/issues/13205 看起来这是设计使然

vsavkin 是路由器创建者。

Answer 2

您可能会发现这很有帮助 - 扩展 RouterLinkActive - 如果一个项目包含一个字符串，则它被“选中”...

import { Directive, Input, OnChanges, ElementRef, Renderer2, ChangeDetectorRef, SimpleChanges, Injector, AfterContentInit } from '@angular/core';
import { Router,RouterLinkActive, RouterLink, RouterLinkWithHref } from '@angular/router';


@Directive({
  selector: '[routerLinkActiveQS]',
  exportAs: 'routerLinkActiveQS'
})
export class RouterLinkQsactiveDirective extends RouterLinkActive implements OnChanges, AfterContentInit
 {

  @Input() 
  set routerLinkActiveQS(data: string[]|string) {
    (<any>this).routerLinkActive = data;
  }

  @Input() routerLinkActiveQSContains : string;

  constructor ( injector: Injector ) {
    super ( injector.get(Router),injector.get(ElementRef),injector.get(Renderer2),injector.get(ChangeDetectorRef));
    (<any>RouterLinkQsactiveDirective.prototype).isLinkActive = this.MyisLinkActive;
  }

  ngOnChanges(changes: SimpleChanges): void {
    super.ngOnChanges(changes); 
  }

  ngAfterContentInit(): void {
    super.ngAfterContentInit();
  }

  private MyisLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean {
    const result = (link: RouterLink | RouterLinkWithHref) => {
      let resultInsde = router.isActive(link.urlTree, this.routerLinkActiveOptions.exact);
      resultInsde = resultInsde || router.url.includes ( this.routerLinkActiveQSContains );
      return resultInsde;
    }
    return result;
  }

}

Answer 3

该解决方案适用于 Angular 11。将链接设置为活动，无论查询参数如何（仅比较段/路径）。

import * as _ from 'lodash';

import {
  AfterContentInit,
  ChangeDetectorRef,
  Directive,
  ElementRef, Input,
  OnChanges,
  OnDestroy,
  Optional,
  Renderer2, SimpleChanges
} from '@angular/core';
import { Router, RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';

@Directive({
  selector: '[rcRouterLinkActive]',
  exportAs: 'rcRouterLinkActive',
})
export class RcRouterLinkActiveDirective extends RouterLinkActive  implements OnChanges, OnDestroy, AfterContentInit {
  @Input()
  set rcRouterLinkActive(data: string[]|string) {
    const classes = Array.isArray(data) ? data : data.split(' ');
    (<any>this).classes = classes.filter(c => !!c);
  }

  constructor(
    router: Router,
    element: ElementRef,
    renderer: Renderer2,
    cdr: ChangeDetectorRef,
    @Optional() link?: RouterLink,
    @Optional() linkWithHref?: RouterLinkWithHref
  ) {
    super(router, element, renderer, cdr, link, linkWithHref);
    (<any>RcRouterLinkActiveDirective).prototype.isLinkActive = this.isRcLinkActive;
  }

  /**
   * this method sets the link as active regardless of query params
   * @param router
   * @private
   */
  private isRcLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean {
    return (link: RouterLink|RouterLinkWithHref) =>{
      const linkPath = '/' + link.urlTree.root.children.primary.segments.join('/');

      return router.isActive(link.urlTree, this.routerLinkActiveOptions.exact) ||
        _.startsWith(router.url, linkPath);
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    super.ngOnChanges(changes);
  }

  ngOnDestroy() {
    super.ngOnDestroy();
  }

  ngAfterContentInit() {
    super.ngAfterContentInit();
  }
}

用法（作为标准 angular 的 routerLinkActive 工作）：

<a ... rcRouterLinkActive="active" ...>Link text</a>