Как я могу условно отключить атрибут routerLink?

Ответ 1

Отключение pointer-events на

<a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a>

a.disabled {
   pointer-events: none;
   cursor: default;
}

См. также Angular2, каков правильный способ отключения элемента привязки?

или

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

или для простого повторного использования шаблона отключенной ссылки

<ng-template #disabledLink>
  <div *ngIf="!isEnabled">not a link</div>
</ng-template>
<a *ngIf="isEnabled; else disabledLink" [routerlink]="xxx">Link</a>

Ответ 2

Нет необходимости отключать любые события указателя:

Шаблон:

<a [routerLink]="homeLinkEnabled ? '/home' : null" routerLinkActive="is-active">Home</a>

Необязательный CSS:

.is-active {
    cursor: default;
    text-decoration: none;
}

Описание:

Когда homeLinkEnabled возвращает false, null заставит routerLink связываться с текущим/активным маршрутом.

Если routerLink ссылается на активный маршрут, будет применен класс, указанный в routerLinkActive.

Там мы можем указать, как должен выглядеть отключенный routerLink.

routerLink к активному маршруту не вызовет событие навигации.

Ответ 3

У меня только что был некоторый успех с похожей проблемой: наличие массива ссылок навигации в ngFor, некоторые требовали [routerLink], а другие требовали (click) - моя проблема заключалась в том, что все ссылки полагались на [routerLink] для [routerLinkActive], поэтому мне пришлось остановить routerLink, не трогая его значение.

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

с:

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

Поскольку интервал находится внутри, вы можете быть уверены, что отмена события произойдет до того, как оно всплывет до [routerLink], в то время как routerLinkActive будет по-прежнему применяться.

Ответ 4

Отключение pointer-events на любом HTML-теге:

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

'none' разрешает отключение pointer-events, то есть отключение ссылки.

null разрешает игнорировать стиль.

Ответ 5

Вы можете решить, будет ли директива routerLink отображаться на основе условия.

В шаблоне:

<a [attr.routerLink]="isDisabled ? null : ''"></a>

Когда значение равно null, директива routerLink не будет отображаться в элементе.

В вашем файле компонента:

get isDisabled() {
 return ... // logic for when the routerLink should be disabled
}

Ответ 6

К сожалению, похоже, что Angular не поддерживает значение value support for the routerLink.

Тем не менее, это работает для меня. Пример реализации моего меню:

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

Проще говоря, если в категории есть подкатегории, не перенаправляйте, а открывайте подкатегории.

Ответ 7

Отключить щелчок по условию, используя следующий простой CSS

.disable-anchor { 
  pointer-events: none; 
}

<a [routerlink]="link" [ngClass]="{'disable-anchor' : condition}">Link</a>