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

Question

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

当我使用

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

它就像我想要的那样工作

但我想添加 routerLinkOptions 并显示按钮错误！ 我的目标是在链接上悬停时从屏幕上删除超链接

标签： htmlangularbootstrap-4angular-routerlink

Answer 1

在您的 component.css 文件中，添加以下 CSS 类，

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

在您的 component.html 文件中，将anchor-style类添加到您的锚 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 类。

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