如何在Angular中禁用侧边栏菜单上的单击

Question

我在angular有一个侧边栏。我想禁用甚至在侧边栏菜单项上的单击，这样人们就不能导航。我想让他们经历一个流程。然而，禁用routerLink会使css变得混乱。如何解决这个问题的任何提示或技巧。

用于边栏导航的HTML代码

<ul class="nav">
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{ menuItem.class }}">
  <a [routerLink]="[menuItem.path]">
    <i class="nc-icon {{ menuItem.icon }}"></i>
    <p>{{ menuItem.title }}</p>

  </a>

</li>

侧边栏现在的外观：

​

​

我想向用户显示他在哪个页面上的侧边栏，但不允许通过侧边栏导航。我将让他们通过每个组件中使用go back和go next按钮的流程。

我试过使用disabled，但它不起作用，而且SOF.However的其他几个解决方案似乎都不起作用。如果我从RouterLink中删除menuItem.path，它会弄乱我的css。

Answer 1

尝试使用attr.disabled，而不是禁用

 <li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{ menuItem.class }}">
  <a [routerLink]="[menuItem.path]" [attr.disabled]="your condition ? '' : null">
    <i class="nc-icon {{ menuItem.icon }}"></i>
    <p>{{ menuItem.title }}</p>
  </a>
</li>

Answer 2

我可以通过在锚标签中添加class="disabled"来解决上面的问题。所以我的代码现在看起来是这样的：

 <ul class="nav">
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{ menuItem.class }}">
  <a [routerLink]="[menuItem.path]"  class="disabled">
    <i class="nc-icon {{ menuItem.icon }}"></i>
    <p>{{ menuItem.title }}</p>

  </a>

</li>

Answer 3

我建议您使用steppers，而不是无序列表。下面是一个https://akveo.github.io/nebular/docs/components/stepper/overview#nbsteppercomponent示例