Пасивна посилання в кутовому куті 2 - <a href= існуючої> еквівалент

У Angular 1.x я можу зробити наступне, щоб створити посилання, яке в принципі нічого не робить:

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

Але той самий тег переходить до бази додатків у куті 2. Що еквівалентно тому в Angular 2?

Редагувати: Це схоже на помилку в маршрутизаторі Angular 2, і тепер на Github існує проблема .

Я шукаю рішення, яке не існує, або підтвердження того, що його не буде.

Якщо у вас кутовий 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>

Це буде те саме, це не має нічого спільного angular2. Це простий тег html.

В основному a(якірний) тег буде наданий HTML-аналізатором.

Редагувати

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

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

Плункр

Іншим способом може бути використання routerLinkдирективи з прохідним ""значенням, яке з часом генерує порожнєhref=""

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

Існують способи зробити це з 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 з прикладом роботи.

Якір повинен орієнтуватися на щось, тому я гадаю, що поведінка є правильною, коли він рухається. Якщо вам це потрібно, щоб перемикати щось на сторінці, це більше нагадує кнопку? Я використовую завантажувальний інструмент, щоб я міг використовувати це:

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

Я використовую цей спосіб вирішення за допомогою 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>

Сподіваюся, це допомагає

розчин симеїла :

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

По-справжньому просте рішення - не використовувати тег A - скоріше використовувати проміжок:

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

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

Ось простий спосіб

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

зафіксуйте бурхливий випадок і збийте його

Ось кілька способів зробити це:

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

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

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

У моєму випадку видалення атрибута href вирішує проблему, доки функція клацання призначена a.

Ви запобігаєте поведінці браузера за замовчуванням. Але для цього не потрібно створювати директиву.

Це легко як наступний приклад:

my.component.html

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

my.component.ts

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

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

У мене є 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>

Цікаво, чому ніхто не пропонує routerLink та routerLinkActive (Angular 7)

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

Я видалив href і зараз використовую цей. Використовуючи href, він збирався до базової URL-адреси або знову завантажував той самий маршрут.

вам потрібно запобігти поведінці за замовчуванням події таким чином.

У html

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

У файлі ts

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

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

Дійсно просте рішення (click)="(null)"

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