如何在Angular的侧边栏菜单上禁用Click事件答案

【问题标题】：How to disable Click even on sidebar menu in Angular如何在Angular的侧边栏菜单上禁用Click事件
【发布时间】：2021-10-02 02:14:12
【问题描述】：

我有一个角度的侧边栏。我想禁用即使在侧边栏菜单项上的点击，这样人们就无法导航。我希望他们经历一个流程。但是禁用 [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>

侧边栏现在的样子：

我想在侧边栏中向用户显示他在哪个页面上，但不允许浏览侧边栏。我将使用每个组件中的返回和下一步按钮让他们通过一个流程。

我尝试过使用 [disabled]，但它不起作用，并且 SOF 提供的其他解决方案很少。但是它们似乎都不起作用。如果我从 RouterLink 中删除 [menuItem.path] 那么它会弄乱我的 css。

【问题讨论】：

试试 - [attr.disabled]

标签： javascript html css angular bootstrap-4

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

[attr.disabled] - 这没有成功？我已经检查了使用 - [attr.disabled] 及其工作..

【解决方案3】：

我建议您使用步进器而不是无序列表。这是一个例子 https://akveo.github.io/nebular/docs/components/stepper/overview#nbsteppercomponent

【讨论】：

【解决方案4】：

尝试在 [ngClass] 的帮助下添加新的 CSS 类

.custom-cursor {
    cursor: not-allowed;
}

【讨论】：