Пассивная ссылка в Angular 2 - <a href="">эквивалентная

Ответ 1

Если у вас Angular 5 или выше, просто измените

<a href="" (click)="passTheSalt()">Click me</a>

в

<a [routerLink]="" (click)="passTheSalt()">Click me</a>

При наведении на нее ссылки будут отображаться со значком руки, и нажатие на нее не приведет к запуску какого-либо маршрута.

Ответ 2

Более новые версии Angular (по крайней мере v7) поддерживают пустой routerLink и теперь он работает, ничего не делая.

<a [routerLink]="" 
   (click)="foo()">Bar</a>

Но если routerLinkActive используется с этим решением, оно всегда сообщается как активное.

(источник)

Ответ 3

Это будет то же самое, оно не имеет ничего angular2 с angular2. Это простой HTML-тег.

В основном (якорь) тег будет оказывать HTML парсер. a

редактировать

Вы можете отключить этот href, имея на нем javascript:void(0) с ним ничего не происходило. (Но его взломать). Я знаю, что Angular 1 предоставил эту функциональность из коробки, что мне сейчас не кажется правильным.

<a href="javascript:void(0)" >Test</a>

Plunkr

Другим способом может быть использование директивы routerLink с передачей значения "" которое в конечном итоге сгенерирует пустое значение href=""

<a routerLink="" (click)="passTheSalt()">Click me</a>

Ответ 4

Есть способы сделать это с помощью angular2, но я категорически не согласен, что это ошибка. Я не знаком с угловым1, но это кажется действительно неправильным поведением, хотя, как вы утверждаете, полезно в некоторых случаях, но, очевидно, это не должно быть поведение по умолчанию для любой структуры.

Отклонения в сторону вы можете написать простую директиву, которая захватывает все ваши ссылки и проверяет содержимое href, и если длина его равна 0, вы выполняете preventDefault(), вот небольшой пример.

@Directive({
  selector : '[href]',
  host : {
    '(click)' : 'preventDefault($event)'
  }
})
class MyInhertLink {
  @Input() href;
  preventDefault(event) {
    if(this.href.length == 0) event.preventDefault();
  }
}

Вы можете заставить его работать через ваше приложение, добавив эту директиву в PLATFORM_DIRECTIVES

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: MyInhertLink, multi: true})]);

Здесь plnkr с примером работы.

Ответ 5

Ахор должен перейти к чему-то, поэтому я думаю, что поведение правильное, когда оно маршрутизируется. Если вам нужно, чтобы переключить что-то на странице, это больше похоже на кнопку? Я использую bootstrap, поэтому я могу использовать это:

<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>

Ответ 6

Я использую этот обходной путь с помощью css:

/*** Angular 2 link without href ***/
a:not([href]){
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none
}

HTML

<a [routerLink]="/">My link</a>

Надеюсь, что это поможет

Ответ 7

решение симейла:

<a href="#" (click)="foo(); false">
<a href="" (click)="false">

Ответ 8

На самом деле простое решение не использовать тег A - вместо этого используйте span:

<span class='link' (click)="doSomething()">Click here</span>

span.link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

Ответ 9

Обновлено для Angular 5

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector : '[href]'
})
export class HrefDirective {
  @Input() public href: string | undefined;

  @HostListener('click', ['$event']) public onClick(event: Event): void {
    if (!this.href || this.href === '#' || (this.href && this.href.length === 0)) {
      event.preventDefault();
    }
  }
}

Ответ 10

У меня есть 4 решения для тега-пустышки.

    1. <a style="cursor: pointer;"></a>
    2. <a href="javascript:void(0)" ></a>
    3. <a href="current_screen_path"></a>

4.Если вы используете загрузчик:

<button class="btn btn-link p-0" type="button" style="cursor: pointer"(click)="doSomething()">MY Link</button>

Ответ 11

Вот простой способ

  <div (click)="$event.preventDefault()">
            <a href="#"></a>
   </div>

захватить пузырьковое событие и снять его

Ответ 12

В моем случае удаление атрибута href решает проблему, так как существует функция щелчка, назначаемая.

Ответ 13

Вы предотвратите поведение браузера по умолчанию. Но вам не нужно создавать директиву для этого.

Это легко, как в следующем примере:

my.component.html

<a href="" (click)="goToPage(pageIndex, $event)">Link</a>

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}

Ответ 14

Вот все способы сделать это в контексте Angular2 +:

• <a href="" (click)="false">Click Me</a>

• <a style="cursor: pointer;">Click Me</a>

• <a href="javascript:void(0)">Click Me</a>

Ответ 15

Интересно, почему никто не предлагает routerLink и routerLinkActive (Angular 7)

<a [routerLink]="[ '/resources' ]" routerLinkActive="currentUrl!='/resources'">

Я удалил href и теперь использую это. При использовании href он собирался на базовый URL или снова загружал тот же маршрут.

Ответ 16

Обновлен для Angular2 RC4:

import {HostListener, Directive, Input} from '@angular/core';

@Directive({
    selector: '[href]'
})
export class PreventDefaultLinkDirective {

    @Input() href;
    @HostListener('click', ['$event']) onClick(event) {this.preventDefault(event);}

    private preventDefault(event) {
        if (this.href.length === 0 || this.href === '#') {
            event.preventDefault();
        }
    }
}

Использование

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: PreventDefaultLinkDirective, multi: true})]);

Ответ 17

Действительно, простым решением является (click)="(null)"

<a class="btn btn-default" (click)="(null)">Default</a>

Ответ 18

Вы можете добавить JavaScript :; в атрибуте href вместо routerLink = ""

<a href="javascript:;" *ngIf="item.submenu" class="m-menu__link m-menu__toggle"> some link </a>

use routerLink = "" есть проблема, когда вы находитесь на другой странице.