我一直在从事一个 Angular 项目，其中包括不同的库，最重要的是 ngx-datatable。
路由工作没有任何问题，除了锚标签，其中用户被重定向到 / 即使不需要。
我发现的所有解决方案都建议删除 # 或整个属性本身，但我不能这样做，因为它需要破解我将使用的所有库。
如果请求 URL 是 #，我有什么方法可以使用路由器挂钩或其他东西来停止导航？
【问题讨论】：
标签： angular router ngx-datatable
要达到预期的效果，请使用 javascript:void(0) 作为 href 属性而不是 #（如果您能够单独更改）
<a href="javascript:void(0);"></a>
选项 2： 更新所有 href 的通用解决方案，覆盖 href 属性，如下面的答案所述 Angular 2, handle anchor links with href='#'
@Directive({
selector : '[href]'
})
export class MyLinkDirective {
@Input() href: string;
@HostListener('click', ['$event'])
noop(event: MouseEvent) {
if(this.href.length === 0 || this.href === '#') {
event.preventDefault();
}
}
}
【讨论】：
OP，我假设这是一个动态生成的元素，因为它是通过 ngx-datatable 生成的，这意味着您必须查询该特定元素，然后向其添加一个事件侦听器，以防止事件的默认操作。
import { AfterViewInit, Component, ElementRef} from '@angular/core';
constructor(private elementRef:ElementRef) {}
ngAfterViewInit() {
this.elementRef.nativeElement.querySelector('a[title="Expand/Collapse Group"]')
.addEventListener('click', this.onClick.bind(this));
}
onClick(event) {
event.preventDefault();
}
【讨论】：
如果您不想导航，请不要使用锚链接。我想这是为了折叠和展开。如果您希望您的元素看起来像一个锚链接，那么只需向它添加 css 样式。您的类名：datatable-icon-right 表示您显示一个图标。使用 div 或 i。您不必添加粗体标签 围绕你的文字。只需在 datatable-icon-right 中添加 font-weight:bold。希望对你有帮助
更新
我查看了 ngx-datatable 项目。我在分组示例中找到了这个
<ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
<div style="padding-left:5px;">
<a href="#"
[class.datatable-icon-right]="!expanded"
[class.datatable-icon-down]="expanded"
title="Expand/Collapse Group"
(click)="toggleExpandGroup(group)">
<b>Age: {{ group.value[0].age }}</b>
</a>
</div>
</ng-template>
您可以随意为展开元素添加任何占位符。只需添加一个 div 而不是锚点。如果样式看起来很奇怪，那么只需向您的 div 添加一个额外的类并根据需要设置它的样式。例如：
.datatable-group-header .your-class{cursor:pointer...}
【讨论】：