Angular：如何使用 routerLink 覆盖嵌套的 href？

Question

我有一个在嵌套锚标记上使用href属性的第三方 package。 当然，我不想使用href导航。 我在父组件上应用了routerLink指令，因为我无法访问和修改子组件。 但是href属性会覆盖所有内容。 如何强制 angular 使用routerLink指令？

我的代码如下所示：

<ngx-gallery routerLink="home" [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

Answer 1

首先，在 ngx-gallery的源代码和文档中，我找不到任何设置锚标记的参考，但如果你说有，我应该相信你。

但是，您可以尝试手动从锚标记中删除href值。 你甚至可以为它编写一个单独的指令：

@Directive({
  selector: '[disableLinks]'
})
export class DisableLinksDirective implements AfterViewInit, OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(
    private el: ElementRef<HTMLElement>
    @Optional() @Self() private gallery: NgxGalleryComponent
  ) {}

  ngOnInit(): void {
    if (this.gallery) {
      merge(
        this.gallery.imagesReady,
        this.gallery.change,
        this.gallery.previewChange
      ).pipe(
        takeUntil(this.destroy$)
      ).subscribe(() => this.disableLinks())
    }
  }

  ngAfterViewInit(): void {
    this.disableLinks();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  private disableLinks(): void {
    this.el.nativeElement.querySelectorAll('a').forEach((a) => a.href = '');
  }
}

然后您可以在您的元素上设置：

<ngx-gallery
  disableLinks
  routerLink="home"
  [options]="galleryOptions"
  [images]="galleryImages">
</ngx-gallery>

我不完全知道这些事件中的任何一个是否会触发 href 再次更新，但那是你自己找出来的：）