routerLink 속성을 조건부로 비활성화하려면 어떻게 해야 합니까?

routerLink 속성을 조건부로 비활성화하려면 어떻게 해야 합니까?

Angular 2 애플리케이션에서 routerLink를 사용하지 않도록 설정하려고 합니다.클릭 이벤트를 처리하려고 했습니다.click이벤트(와 함께)event.preventDefault()그리고.event.stopPropagation()하지만 작동하지 않습니다.

routerLink를 비활성화하려면 어떻게 해야 합니까?

사용 안 함pointer-eventsCSS를 통해 요소에서:

<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>

각도 13 이상

[routerLink]="null"(및undefined)는 이제 공식적으로 사용되지 않습니다.routerLink.
(문서 참조)

이 정도면 충분합니다.

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

각도 12 이하

[routerLink]="null"(및undefined)는 빈 명령 배열의 단축형으로 처리됩니다.그래서 그것은.routerLink현재/활성 경로에 연결합니다.이 행동은 우리가 그것을 남용할 수 있게 해줍니다.routerLinkActive우리의 목적을 위한 지침:

템플릿:

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

선택적 CSS:

.is_disabled {
    cursor: default;
    text-decoration: none;
}

.is_active {
    // your style for active router link
}

라이브 데모(Angular 10):
StackBlitz에서 데모 보기

자세한 설명:

언제linkEnabled돌아온다false,null만들 것입니다routerLink현재/활성 경로에 연결합니다.

한다면routerLink활성 경로에 대한 링크, 에 지정된 클래스routerLinkActive적용됩니다.그것은is_disabled이 경우에는

여기서 비활성화된 routerLink가 나타나는 방법을 지정할 수 있습니다.

routerLink활성 경로로 이동하면 탐색 이벤트가 트리거되지 않습니다.

모든 주요 답변은 해결 방법입니다.

가장 좋은 방법은 이 솔루션 https://stackoverflow.com/a/45323200/3241192 에서 @taras-d를 통해 찾을 수 있는 것입니다.

routerLink를 비활성화하는 다른 방법 - 클릭 시 대체 방법.

이렇게 하려면 지시문을 만들어야 합니다.

import { Directive, Input, Optional } from '@angular/core';
import { RouterLink, RouterLinkWithHref } from '@angular/router';

@Directive({
    selector: '[routerLink][disableLink]'
})
export class DisableLinkDirective {

    @Input() disableLink: boolean;

    constructor(
        // Inject routerLink
        @Optional() routerLink: RouterLink,
        @Optional() routerLinkWithHref: RouterLinkWithHref
    ) {

        const link =  routerLink || routerLinkWithHref;

        // Save original method
        const onClick = link.onClick;

        // Replace method
        link.onClick = (...args) => {
            if (this.disableLink) {
                return routerLinkWithHref? false: true;
            } else {
                return onClick.apply(link, args);
            }
        };
    }

}

용도:

<a routerLink="/search" [disableLink]="!isLogged">Search</a>

비슷한 문제로 성공을 거두었습니다. ngFor에 nav 링크 배열이 있습니다. 일부는 [routerLink]가 필요한 반면 다른 링크는 (클릭) 필요했습니다. 제 문제는 모든 링크가 [routerLinkActive]에 대해 [routerLink]에 종속되어 있었기 때문에, 값을 건드리지 않고 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가 계속 적용됩니다.

사용 안 함pointer-eventsHTML 태그:

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

'none'사용 안 함으로 확인pointer-events즉, 링크를 비활성화합니다.

null스타일을 무시하도록 확인합니다.

안타깝게도 Angular는 routerLink에 대해 null 값을 지원하지 않는 것 같습니다.

하지만, 이것은 저에게 효과가 있습니다.메뉴 구현의 예:

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

간단히 말해, 범주에 하위 범주가 있는 경우 리디렉션하지 않고 하위 범주를 엽니다.

사용해 보십시오.

<div *ngFor="let childitem of menuitem.MenuRoutes">
<a [routerLink]="menuitem.IsMain ? [childitem.Route] : []"><a>
</>

제 경우는 routerLink를 사용하고, 때로는 click을 사용하여 routerLink URL을 제공하지 않을 경우 modal, 경로 URL의 내부 로직을 여는 것이었습니다. 그래서 click을 위해서는 routerLink를 삭제해야 했습니다.

[routerLink]="disableRouterLink ? null : (btnRouterLink || pathCondition)"

제경에는우,null하고 routerLink 속성을 할 수 .(click)제대로 된 행사

빈 PS 빈[]위의 답변에 제공된 내용은 요소에서 특성 라우터 링크를 제거하지 않습니다.

언급URL : https://stackoverflow.com/questions/35431188/how-can-i-conditionally-disable-the-routerlink-attribute