Присоединение к тегу привязки в angular2

Я пытаюсь подключить событие click для привязки тегов (исходящих из ajax) и блокировать перенаправление по умолчанию. Как я могу сделать это в angular 2?

<ul>
<li><a href="/abc"><p>abc</p></a></li>
<li><a href="/abc1"><p>abc1</p></a></li>
<li><a href="/abc2"><p>abc2</p></a></li>
<li><a href="/abc3"><p>abc3</p></a></li>
</ul>

в файле ts

   constructor(elementRef: ElementRef, renderer: Renderer) {

        this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
            event.preventDefault();
            let target = event.target || event.srcElement || event.currentTarget;
            console.log(target);

        });


    }

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

все помогает оценить

Ответы

Ответ 1

Вы можете использовать routerLink (который является альтернативой href для angular 2+) с событием клика, как показано ниже, чтобы предотвратить перезагрузку страницы

<a [routerLink]="" (click)="onGoToPage2()">Go to page 2</a>

Ответ 2

Я думаю, вы не позволяете Angular работать на вас.

В Angular 2:

  • Удалите тег href из <a>, чтобы предотвратить пересылку страницы.
  • Затем просто добавьте свой обычный Angular атрибут и функцию click.
  • Добавить в style: "cursor: pointer", чтобы заставить его действовать как кнопка

Ответ 3

Вам просто нужно добавить !! перед вызовом обработчика метода click: (click)="!!onGoToPage2()". !! предотвратит действие по умолчанию, преобразовав возвращаемый вами метод в логическое значение. Если это void метод, то он станет false.

Ответ 4

<a href="#" (click)="onGoToPage2()">Go to page 2</a>

Ответ 5

Вы можете попробовать что-то вроде этого:

<a href="javascript: void(0);" (click)="method()">

ИЛИ ЖЕ

<a href="javascript: void(0);" [routerLink]="['/abc']">

Ответ 6

<a href="javascript:void(0);" (click)="onGoToPage2()">Go to Page 2</a>

Ответ 7

Я смог заставить это работать, просто используя [routerLink]="[]". Квадратные скобки внутри кавычек важны. Не нужно предотвращать действия по умолчанию в методе или чем-либо еще. Это похоже на "!!" метод, но без необходимости добавлять этот неясный синтаксис в начало вашего метода.

Таким образом, ваш полный тег привязки будет выглядеть так:

<a [routerLink]="[]" (click)="clickMethod()">Your Link</a>

Просто убедитесь, что ваш метод работает правильно, иначе вы можете обновить страницу, а это может сбить вас с толку тем, что на самом деле не так!

Ответ 8

Я смог успешно реализовать это

<a [routerLink]="['/login']">abc</a>

Ответ 9

Вы можете использовать routerLink, который является альтернативой href для angular 2. ** Используйте routerLink, как показано ниже в html

<a routerLink="/dashboard">My Link</a>

и убедитесь, что вы зарегистрировали свой routerLink в modules.ts или router.ts, как этот

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent }
]

Ответ 10

Мне пришлось объединить несколько ответов, чтобы получить рабочее решение.

Это решение будет:

  • Украсьте ссылку соответствующими стилями "а".
  • Вызовите нужную функцию.

  • Не переходите на http://mySite/#

    <a href="#" (click)="!!functionToCall()"> Ссылка </a>

Ответ 11

Я рассмотрел все вышеприведенные ответы. Нам просто нужно реализовать две вещи, чтобы работать так, как ожидалось.

Шаг - 1: Добавьте событие (click) в тег привязки на странице HTML и удалите href= "", поскольку оно не поддерживается в Angular, вместо этого используйте routerLink = ""

<ul>
  <li><a routerLink="" (click)="hitAnchor1($event)"><p>Click One</p></a></li>
  <li><a routerLink="" (click)="hitAnchor2($event)"><p>Click Two</p></a></li>
</ul>

Шаг 2: вызовите вышеуказанную функцию, чтобы прикрепить событие click к тегам привязки (из ajax) в файле .ts,

  hitAnchor1(e){
      console.log("Events", e);
      alert("You have clicked the anchor-1 tag");
   }
  hitAnchor2(e){
      console.log("Events", e);
      alert("You have clicked the anchor-2 tag");
   }

Все это. Это работает, как ожидалось. Я создал пример ниже, вы можете посмотреть: -

https://stackblitz.com/edit/angular-yn6q6t

Ответ 12

Я сталкивался с этой проблемой в Angular 5, которая все еще шла по ссылке. Решение состояло в том, чтобы функция возвращала false, чтобы предотвратить обновление страницы:

HTML

<a href="" (click)="openChangePasswordForm()">Change expired password</a>

Т.С.

openChangePasswordForm(): boolean {
  console.log("openChangePasswordForm called!");
  return false;
}

Ответ 13

У меня были проблемы с перезагрузкой страницы, но я смог избежать этого с помощью routerlink=".":

<a routerLink="." (click)="myFunction()">My Function</a>

Я получил вдохновение из документации по угловому материалу на кнопках:https://material.angular.io/components/button/examples