В Angular 1.x я могу сделать следующее, чтобы создать ссылку, которая практически ничего не делает:
<a href="">My Link</a>
Но тот же тег переходит к базе приложения в Angular 2. Что эквивалентно этому тегу в Angular 2?
Изменить: похоже, что это ошибка в маршрутизаторе Angular 2, и теперь в github есть открытая проблема .
Я ищу нестандартное решение или подтверждение того, что его не будет.
<a>
, без "html"?a
теги. Но это выглядит хакерским.Ответы:
Если у вас Angular 5 или выше, просто измените
в
Ссылка будет отображаться со значком руки при наведении на нее курсора; нажатие на нее не приведет к запуску какого-либо маршрута.
Примечание. Если вы хотите сохранить параметры запроса, вы должны установить для
queryParamsHandling
параметра значениеpreserve
:источник
[routerLink]=""
оно отображается как<a href="null" (click)="myFunction()">My Link</a>
Angular 5 в Chrome 64.[routerLink]=""
/href="null"
работает в IE 11[routerLink]=""
, текст « Щелкните меня» не отображается как ссылка и не показывает значок курсора в виде руки.Это будет то же самое, ни к чему
angular2
. Это простой тег HTML.Обычно
a
(якорь) тег будет отображаться парсером HTML.редактировать
Вы можете отключить это
href
, включивjavascript:void(0)
его, чтобы на нем ничего не происходило. (Но это его взлом). Я знаю, что Angular 1 предоставил эту функциональность из коробки, что сейчас мне кажется неправильным.Plunkr
Другой способ - использовать
routerLink
директиву с передаваемым""
значением, которая в конечном итоге создаст пустойhref=""
источник
#
внутреннего якоряhref
может повлиять наAngular1
маршрут ... может отправить вас на страницу по умолчанию (если она там)#
angular 1.x. Мне нужна ссылка, которая ничего не делает в angular2, как иhref=""
в angular 1.x.<a href="">My Link</a>
будет .. а что с ним сейчас происходит?href="javascript:void(0);"
меня ДЕЙСТВИТЕЛЬНО работает.Есть способы сделать это с 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 с примером работы.
источник
pointer-events
заключается в отсутствии поддержки IE ( caniuse ) (я могу обойти ее даже в IE11, как ни странно), и это не мешает щелкнуть ссылку из консоли. Я поддержал ответ @Pankaj, потому что это самый простой с моей точки зрения, мой ответ - это всего лишь способ сделать это с помощью angular2, я мог бы упростить его, но селекторы css ограничены.Ачор должен к чему-то перейти, поэтому я думаю, что при маршрутизации поведение правильное. Если вам нужно что-то переключать на странице, это больше похоже на кнопку? Я использую бутстрап, поэтому могу использовать это:
источник
Я использую этот обходной путь с css:
html
Надеюсь это поможет
источник
styles.css
файл верхнего уровня проекта Angular, и он будет отлично работать!раствор симейла :
источник
Вот простой способ
захватить всплывающее событие и сбить его
источник
Очень простое решение - не использовать тег A - вместо этого используйте диапазон:
источник
button
элемент, если хотите, чтобыdoSomething
он был на странице.<button>
элементы по умолчанию запускают щелчок приspace
нажатии клавиши. Использованиеspan
(или<a>
) удаляет эту функцию - поэтому действия с клавиатуры не будут работатьВот несколько способов сделать это:
<a href="" (click)="false">Click Me</a>
<a style="cursor: pointer;">Click Me</a>
<a href="javascript:void(0)">Click Me</a>
источник
В моем случае удаление атрибута href решает проблему, если для файла.
источник
Вы запретили поведение браузера по умолчанию. Но для этого не нужно создавать директиву.
Это просто, как в следующем примере:
my.component.html
my.component.ts
источник
Обновлено для Angular 5
источник
У меня есть 4 решения для фиктивного тега привязки.
4. Если вы используете бутстрап:
источник
Интересно, почему никто не предлагает routerLink и routerLinkActive (Angular 7)
Я удалил href и теперь использую это. При использовании href он переходил на базовый URL-адрес или снова загружал тот же маршрут.
источник
вам необходимо предотвратить поведение события по умолчанию следующим образом.
В html
В файле ts
источник
Обновлено для Angular2 RC4:
С помощью
источник