如何在 Angular 的側邊欄菜單上禁用單擊偶數

Question

我有一個有角度的側邊欄。 我想即使在側邊欄菜單項上也禁用單擊，以便人們無法導航。 我希望他們通過一個流程。 但是禁用 [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。

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

我建議您使用步進器而不是無序列表。 這是一個例子https://akveo.github.io/nebular/docs/components/stepper/overview#nbsteppercomponent

Answer 4

嘗試在[ngClass]幫助下添加新的 css 類

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