javascript — отключение routerLink с помощью метода stopImmediatePropogation

Отключение routerLink с помощью метода stopImmediatePropogation

Нет решения, которое привело бы к разметке {amp}lt;a routerLink="" attributeSelectorForComponent{amp}gt;{amp}lt;/a{amp}gt; .

Решение, которое вы попробовали, не будет работать, потому что stopImmediatePropagation предназначено для предотвращения stopImmediatePropagation события и предотвращает поведение браузера по умолчанию для этого типа события (например, preventDefault события вызовет запрос POST ). В любом случае Angular будет уведомлен о событии и отреагирует соответствующим образом.

Чистое решение было бы возможным, если RouterLink директива RouterLink имела атрибут exportAs . В этом случае было бы возможно управлять RouterLink из пользовательской директивы. К сожалению, это не так ( источник RouterLink )

Единственный оставленный вариант — расширить директиву RouterLinkWithHref следующим образом:

 @Directive({ selector: "a[myRouterLink],area[myRouterLink]" }) export class MyDirective extends RouterLinkWithHref implements OnChanges { @Input() myRouterLink; @Input() myDisabled; constructor( private myRouter: Router, private myRoute: ActivatedRoute, private myLocationStrategy: LocationStrategy, private host: ElementRef ) { super(myRouter, myRoute, myLocationStrategy); } ngOnChanges() { if (this.myDisabled) { this.host.nativeElement.setAttribute("disabled", "disabled"); this.routerLink = null; } else { this.host.nativeElement.removeAttribute("disabled"); this.routerLink = this.myRouterLink; } } } 

Это дает следующую разметку: {amp}lt;a myRouterLink="a" [myDisabled]="disabled"{amp}gt;{amp}lt;/a{amp}gt;

Обратите внимание, что для полноценного рабочего решения вам также необходимо расширить RouterLink

Вы можете попробовать демо здесь: https://stackblitz.com/edit/angular-p2w4ff

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector