W Angular 1.x mogę wykonać następujące czynności, aby utworzyć łącze, które w zasadzie nic nie robi:
<a href="">My Link</a>
Ale ten sam znacznik przechodzi do bazy aplikacji w Angular 2. Jaki jest odpowiednik tego w Angular 2?
Edycja: Wygląda na błąd w routerze Angular 2, a teraz jest otwarty problem na ten temat na githubie .
Szukam rozwiązania po wyjęciu z pudełka lub potwierdzenia, że nie będzie.
<a>
bez „html”?a
tagów. Ale to wygląda na zepsute.Odpowiedzi:
Jeśli masz Angular 5 lub nowszy, po prostu zmień
w
Łącze zostanie wyświetlone z ikoną dłoni, gdy najedziesz na nie kursorem, a kliknięcie go nie uruchomi żadnej trasy.
Uwaga: Jeśli chcesz zachować parametry zapytania, ustaw
queryParamsHandling
opcję napreserve
:źródło
[routerLink]=""
, renderuje jako<a href="null" (click)="myFunction()">My Link</a>
Angular 5 w Chrome 64.[routerLink]=""
/href="null"
działa w IE 11[routerLink]=""
tekstu Kliknij mnie nie jest wyświetlany jako łącze i nie pokazuje ikony kursora dłoni.To będzie to samo, nie ma z tym nic związanego
angular2
. To prosty tag html.Zasadniczo
a
tag (kotwica) będzie renderowany przez parser HTML.Edytować
Możesz to wyłączyć,
href
mającjavascript:void(0)
na nim, aby nic się z nim nie działo. (Ale to hack). Wiem, że Angular 1 dostarczył tę funkcję od razu po wyjęciu z pudełka, co nie wydaje mi się teraz poprawne.Plunkr
Inaczej można by użyć
routerLink
dyrektywy z przekazaniem""
wartości, która ostatecznie wygeneruje wartość pustąhref=""
źródło
#
kotwicy wewnętrznejhref
może wpłynąć naAngular1
trasę .. może wysłać do strony domyślnej (jeśli jest)#
w kątowym 1.x. Chcę łącza, które nic nie robi w angular2, tak jakhref=""
w angular 1.x.<a href="">My Link</a>
to zrobię ... ale co się z tym obecnie dzieje?href="javascript:void(0);"
DZIAŁA dla mnie.Istnieją sposoby na zrobienie tego z angular2, ale zdecydowanie nie zgadzam się, że jest to błąd. Nie jestem zaznajomiony z angular1, ale wydaje mi się, że jest to naprawdę niewłaściwe zachowanie, mimo że według Ciebie jest przydatne w niektórych przypadkach, ale wyraźnie nie powinno to być domyślne zachowanie żadnego frameworka.
Pomijając nieporozumienia, możesz napisać prostą dyrektywę, która pobierze wszystkie linki i sprawdzi
href
ich zawartość, a jeśli jej długość wynosi 0, wykonujesz jąpreventDefault()
, oto mały przykład.Możesz sprawić, że będzie działać w całej aplikacji, dodając tę dyrektywę w PLATFORM_DIRECTIVES
Oto plnkr z działającym przykładem.
źródło
pointer-events
jest brak wsparcia z IE ( caniuse ) (nawet z IE11 mogę to ominąć) i nie przeszkadza to w kliknięciu linku z konsoli. Głosowałem za odpowiedzią @Pankaj, ponieważ jest najłatwiejsza z mojego punktu widzenia, moja odpowiedź jest po prostu sposobem na zrobienie tego z angular2, mógłbym to ułatwić, ale selektory css są ograniczone.Achor powinien prowadzić do czegoś, więc wydaje mi się, że zachowanie jest prawidłowe, gdy kieruje. Jeśli potrzebujesz go do przełączania czegoś na stronie, to bardziej przypomina przycisk? Używam bootstrap, więc mogę użyć tego:
źródło
Używam tego obejścia z CSS:
html
Mam nadzieję że to pomoże
źródło
styles.css
pliku najwyższego poziomu projektu Angular i będzie działać świetnie!rozwiązanie Simeyla :
źródło
Naprawdę prostym rozwiązaniem nie jest użycie tagu A - zamiast tego użyj span:
źródło
button
elementu, jeśli chceszdoSomething
na stronie.<button>
elementy uruchamiają kliknięcie domyślnie pospace
naciśnięciu klawisza. Użyciespan
(lub<a>
) usuwa tę funkcję - więc działania klawiatury nie będą działać zgodnie z oczekiwaniamiOto prosty sposób
uchwycić bulgotanie i zestrzelić
źródło
Oto kilka sposobów, aby to zrobić:
<a href="" (click)="false">Click Me</a>
<a style="cursor: pointer;">Click Me</a>
<a href="javascript:void(0)">Click Me</a>
źródło
W moim przypadku usunięcie atrybutu href rozwiązuje problem, o ile istnieje przypisana funkcja kliknięcia do pliku.
źródło
Zablokowałeś domyślne zachowanie przeglądarki. Ale nie musisz tworzyć dyrektywy, aby to osiągnąć.
Jest to proste, jak na poniższym przykładzie:
my.component.html
my.component.ts
źródło
Zaktualizowano dla Angular 5
źródło
Mam 4 rozwiązania dla atrapy zawieszki.
4. Jeśli używasz bootstrap:
źródło
Zastanawiam się, dlaczego nikt nie sugeruje routerLink i routerLinkActive (Angular 7)
Usunąłem href i teraz używam tego. Podczas korzystania z href powodowało to przechodzenie do podstawowego adresu URL lub ponowne ładowanie tej samej trasy.
źródło
musisz zapobiec domyślnemu zachowaniu zdarzenia w następujący sposób.
W html
W pliku ts
źródło
Zaktualizowano dla Angular2 RC4:
Za pomocą
źródło
Naprawdę prostym rozwiązaniem jest
(click)="(null)"
<a class="btn btn-default" (click)="(null)">Default</a>
źródło