У меня есть сторонний пакет, который использует атрибут href во вложенном теге привязки. Конечно, я не хочу использовать href. Я применил директиву routerLink к родительскому компоненту, потому что у меня нет возможности получить доступ к дочернему компоненту и изменить его. Но атрибут href отменяет все. Как заставить angular использовать директиву routerLink?
Мой код выглядит так:
<ngx-gallery routerLink="home" [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
Прежде всего, в исходном коде и документации от 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, но это вам решать :)
