使路由链接不可点击答案

【问题标题】：Making routing link non clickable使路由链接不可点击
【发布时间】：2018-03-26 10:08:39
【问题描述】：

我有以下html

<!--SIDE NAV-->
<div class="container-fluid" id="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
  <h4>Returns Panel</h4>
  <ul class="nav nav-pills nav-stacked" >
    <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
      <a routerLink="/">Enter Order ID</a></li>
    <li routerLinkActive="active"><a routerLink="/Pid">Select PID</a></li>
    <li routerLinkActive="active"><a routerLink="/Reasons">Select Reasons for Return</a></li>
    <li routerLinkActive="active"><a >Upload Images</a></li>
  </ul><br>
</div>

我希望用户不能点击这些链接，但这些链接应该是可见的。用户不应该能够更改表单的流程。我怎样才能做到这一点？我需要路由可以操作，因为我路由以显示不同的表单。

【问题讨论】：

您要禁用所有这些还是单个？
全部。但仅对用户点击禁用它们，而不是用于路由。

标签： angular routing angular2-routing

【解决方案1】：

试试这个：

HTML

<a [routerLink]="isActive ? '/link' : null">label</a>

组件

isActive: boolean = true

【讨论】：

这可行，但它也会删除活动类 css。

【解决方案2】：

使用 *ngIf

<a *ngIf="isEnabled" [routerlink]="/some_state_url">Link</a>
<span *ngIf="!isEnabled" [ngClass]="{'class-disabled':!isEnabled}">Link</span>

【讨论】：