How can I conditionally disable the routerLink attribute?

后端 未结 6 2038
时光取名叫无心
时光取名叫无心 2020-11-27 05:56

In my Angular 2 application I\'m trying to disable a routerLink without any success. I\'ve tried to handle the click event on the click event (with event.

相关标签:
6条回答
  • 2020-11-27 06:27

    Disabling pointer-events on any html tag:

    <div [routerLink]="['/home', { foo: bar }]"
         [ngStyle]="{'pointer-events': myLinkEnabled ? 'none' : null}">
         Click me
    </div>
    

    'none' resolves to disabling pointer-events, that is, disabling the link.

    null resolves to ignore the style.

    0 讨论(0)
  • 2020-11-27 06:27

    Unfortunately, Angular doesn't seem to have a null value support for the routerLink.

    However, this works for me. An example of my menu implementation:

    <div *ngFor="let category of categories" [routerLink]="category.subcategories ? [] : [category.link]" (click)="toggleSubcategories(category)">
    

    Simply put, if a category has any subcategories, don't redirect, but open the subcategories.

    0 讨论(0)
  • 2020-11-27 06:37

    Disable pointer-events on the element via CSS:

    <a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a>
    
    a.disabled {
       pointer-events: none;
       cursor: default;
    }
    

    See also Angular2, what is the correct way to disable an anchor element?

    or

    <a *ngIf="isEnabled" [routerlink]="xxx">Link</a>
    <div *ngIf="!isEnabled">not a link</div>
    

    or to easily reuse the disabled link template

    <ng-template #disabledLink>
      <div *ngIf="!isEnabled">not a link</div>
    </ng-template>
    <a *ngIf="isEnabled; else disabledLink" [routerLink]="xxx">Link</a>
    
    0 讨论(0)
  • 2020-11-27 06:38

    No need to disable any pointer events:

    Template:

    <a [routerLink]="linkEnabled ? 'path' : null"
       [routerLinkActive]="linkEnabled ? 'is_active' : 'is_disabled'">Link</a>
    

    Optional CSS:

    .is_disabled {
        cursor: default;
        text-decoration: none;
    }
    
    .is_active {
        // your style for active router link
    }
    

    Live demo:
    See demo on StackBlitz

    Description:

    When linkEnabled returns false, null will make routerLink to link to the current/active route.

    If routerLink links to the active route, the class which is specified in routerLinkActive will be applied. That will be is_disabled in this case.

    There we can specify, how the disabled routerLink should appear.

    routerLink to the active route won't trigger a navigation event.

    0 讨论(0)
  • 2020-11-27 06:42

    I've just had some success with a similar issue: having an array of nav links in an ngFor, some required [routerLink], while others required (click) - my issue was that all links relied on [routerLink] for [routerLinkActive], so I had to stop routerLink, without touching it's value.

    `<a [routerLink]="item.link" routerLinkActive="isActive">
        <span (click)="item.click ? item.click($event) : void>
    </a>`
    

    with:

    `click: ($event) => {
        $event.stopPropagation(); // Only seems to
        $event.preventDefault(); // work with both
        // Custom onClick logic
    }`
    

    As the span is inside, you can be sure the cancelling of the event happens before it bubbles up to [routerLink], while routerLinkActive will still apply.

    0 讨论(0)
  • 2020-11-27 06:42

    Try this:

    <div *ngFor="let childitem of menuitem.MenuRoutes">
    <a [routerLink]="menuitem.IsMain ? [childitem.Route] : []"><a>
    </>
    
    0 讨论(0)
提交回复
热议问题