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 再次更新，但那是你自己找出來的：）