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


146

В Angular 1.x я могу сделать следующее, чтобы создать ссылку, которая практически ничего не делает:

<a href="">My Link</a>

Но тот же тег переходит к базе приложения в Angular 2. Что эквивалентно этому тегу в Angular 2?

Изменить: похоже, что это ошибка в маршрутизаторе Angular 2, и теперь в github есть открытая проблема .

Я ищу нестандартное решение или подтверждение того, что его не будет.


Вы все еще можете. Это просто html. Какое-нибудь конкретное использование для этого?
Sasxa

Да, это все еще действительный html, но эффект от Angular 1.x не тот.
s.alem

1
Вы пробовали просто <a>, без "html"?
Sasxa

3
Да, но браузер не относится к этому так же. Я знаю, что могу переопределить эффект курсора с помощью css и назначить указатель на все aтеги. Но это выглядит хакерским.
s.alem

3
Я считаю, что путь ng1 был неправильным (: поведение по умолчанию должно быть таким же, как и в стандартном html ...
Sasxa

Ответы:


208

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

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

в

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

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

Примечание. Если вы хотите сохранить параметры запроса, вы должны установить для queryParamsHandlingпараметра значение preserve:

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

2
Это сработало, [routerLink]=""оно отображается как <a href="null" (click)="myFunction()">My Link</a>Angular 5 в Chrome 64.
Zymotik

3
Я могу подтвердить то же самое [routerLink]=""/ href="null"работает в IE 11
Zymotik

1
<a [routerLink ]="" (click)="passTheSalt()"> Нажми меня </a> работает в angular7. Я вижу, что <a (click)="passTheSalt()"> Щелкните меня </a> без routerLInk также работает в angular7. Какой лучший способ сделать пассивную якорную ссылку с использованием [routerLink] или без routerLink?
Ян Постон Фреймер

1
@IanPostonFramer Когда я удаляю [routerLink]="", текст « Щелкните меня» не отображается как ссылка и не показывает значок курсора в виде руки.
Эмиэль Конинг

6
ВНИМАНИЕ: это сбросит ваши параметры URL. Покупатель, будь осторожен.
Stavm

89

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

Обычно a(якорь) тег будет отображаться парсером HTML.

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

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

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

Plunkr


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

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

@ s.alem, что бы вы ни говорили, наличие #внутреннего якоря hrefможет повлиять на Angular1маршрут ... может отправить вас на страницу по умолчанию (если она там)
Панкадж Паркар

1
Я знаю эффект от #angular 1.x. Мне нужна ссылка, которая ничего не делает в angular2, как и href=""в angular 1.x.
s.alem

@ s.alem так и <a href="">My Link</a>будет .. а что с ним сейчас происходит?
Панкадж Паркар

1
[routerLink] = "" удалит параметры запроса из вашего маршрута, скорее всего, это не то, что вам нужно. Вы можете использовать параметры запроса preserve, но это кажется слишком
большим

2
Однако вариант 1: У href="javascript:void(0);"меня ДЕЙСТВИТЕЛЬНО работает.
Пол Карлтон

22

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

Помимо разногласий, вы можете написать простую директиву, которая захватывает все ваши ссылки и проверяет 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 с примером работы.


Проголосуйте за глобальное угловое решение, но я не принимаю его как правильный ответ, потому что, как я уже сказал, я ищу только исходное решение, пока они не подтвердят, что его не будет, или пока мне действительно не понадобится Это. Но все же большое спасибо.
s.alem

2
Проблема pointer-eventsзаключается в отсутствии поддержки IE ( caniuse ) (я могу обойти ее даже в IE11, как ни странно), и это не мешает щелкнуть ссылку из консоли. Я поддержал ответ @Pankaj, потому что это самый простой с моей точки зрения, мой ответ - это всего лишь способ сделать это с помощью angular2, я мог бы упростить его, но селекторы css ограничены.
Эрик Мартинес

1
Кажется, это нарушает ссылки вкладки начальной загрузки (например, <a href="#tab-id">)
xd6_

В каком модуле есть функция начальной загрузки?
июн711, 05

16

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

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

1
Мне нравится это решение. Если вы хотите, чтобы курсор показывал руку, добавьте style = "cursor: pointer".
Ньюман

Во многих ситуациях это хорошее решение, однако имейте в виду, что кнопка имеет большие размеры, чем просто привязка на основе текста.
yankee

@yankee, вы можете изменить это в css, но я не рекомендую ... факт в том, что кнопка - это кнопка, а ссылка - это ссылка ... слишком печально, что Интернет не такой белый или черный.
Ayyash

12

Я использую этот обходной путь с 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>

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


1
Это лучшее решение, так как в основном отсутствует визуальный эффект. Вы можете поместить этот CSS в styles.cssфайл верхнего уровня проекта Angular, и он будет отлично работать!


4

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

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

захватить всплывающее событие и сбить его


Почему бы не использовать сам якорь для предотвращения поведения по умолчанию? Как описано здесь: stackoverflow.com/a/44465069/702783 Мне кажется менее «хакерским».
Михаэль

4

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

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

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

Вы не должны делать этого в смысле семантической разметки. Используйте buttonэлемент, если хотите, чтобы doSomethingон был на странице.
Michael Kühnel

<button>элементы по умолчанию запускают щелчок при spaceнажатии клавиши. Использование span(или <a>) удаляет эту функцию - поэтому действия с клавиатуры не будут работать
должным образом

да, я ценю решение, но это
мешает

4

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

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

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

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



3

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

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

my.component.html

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

my.component.ts

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

3

Обновлено для 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();
    }
  }
}

3

У меня есть 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>

0

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

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

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


0

вам необходимо предотвратить поведение события по умолчанию следующим образом.

В html

<a href="" (click)="view($event)">view</a>

В файле ts

view(event:Event){
 event.preventDefault();
 //remaining code goes here..
}

-2

Обновлено для 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})]);
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.