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

Question

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

我使用时

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

它的工作原理就像我想要的

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

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类。

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