RouterLink 在屏幕上显示超链接（下图）我不想在页面上显示超链接

Question

<a routerLink="/dashboard">Dashboard</a> can i remove hyperlink ?

当我使用

<button routerLink="/dashboard">Dashboard</button>

它像我想要的那样工作

但我想添加 routerLinkOptions，它显示按钮错误！ 我的目标是在悬停在 link

上时从屏幕上删除 hyperlink

Answer 1

在您的 component.css 文件中，添加以下内容 CSS class,

.anchor-style {
 text-decoration: none !important;
 cursor: default !important;
}

在您的 component.html 文件中，将 anchor-style class 添加到锚点 HTML 元素。

<a class="anchor-style" routerLink="/dashboard">Dashboard</a>

如果这不能回答您的问题，您可以尝试以下方法，

1. 将 RouterLinkActive 应用于 RouterLink 的祖先。

   <div routerLinkActive="active-link-styles" [routerLinkActiveOptions]="{exact: true}"> <button routerLink="/dashboard">Dashboard</button> <button routerLink="/home">Home</button> </div>

如果 url 是 '/dashboard' 或 '/home'，这将在 div 标签上设置 active-link-styles class。

2. 您可以在点击事件上调用函数。依次导航到所需的屏幕。 在 component.html 文件中， <button (click)="navigateToDashboard()">Dashboard</button> 在 component.ts 文件中，navigateToDashboard() { this.router.navigate(['/dashboard']) }