Прикрепление click to anchor tag в angular2

Question

Я пытаюсь прикрепить событие click для привязки тегов (исходящих из ajax) и заблокировать перенаправление по умолчанию. Как я могу сделать это в угловом 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); 

     }); 


    } 

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

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

Answer 1

Я думаю, что вы не позволяют Угловой работе для вас.

В угловом 2:

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

Answer 2

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

Answer 3

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

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

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

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

Answer 4

Я был в состоянии осуществить это успешно

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

Answer 5

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

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

Answer 6

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