Angular2 App reloading после испугающего события

Question

Я спокойно отношусь к Angular2 и развитию SPA, поэтому, пожалуйста, извините, если это глупый вопрос.

Я следую учебнику. Используются несколько компонентов, и при нажатии на один элемент происходит излучение, которое потребляется другими компонентами.

<a href="" class="list-group-item clearfix" (click)="onSelect()"> 

В соответствующем компоненте следующий метод называется

onSelect(event) { 
event.stopPropagation(); 
console.log("Emitting event in recipe-item.component"); 
//this.recipeSelected.emit(this.recipe); 
} 

Я прокомментировал последнюю строку на цели, потому что я пытался отладить вещь. Обычно событие излучается и потребляется. Но сразу после записи в журнале приложение перезагружается. В chrome в консоли я вижу «Навигация по [url]».

Может ли кто-нибудь дать мне подсказку о том, как это решить?

С уважением и благодарностью.

Answer 1

Удалить href = "", и вы заставите его работать. Вы перенаправляетесь на страницу и фактически перезагружаете страницу. Угловой 2 должен использовать только угловой 2 маршрутизатор.

Таким образом, вы будете иметь следующий HTML код:

<a class="list-group-item clearfix" (click)="onSelect()"> 

Answer 2

Вместо stopPropagation() вы должны использовать preventDefault() или вернуть false:

onSelect(event) { 
    event.preventDefault(); 

    console.log("Emitting event in recipe-item.component"); 
    this.recipeSelected.emit(this.recipe); 
} 

или

(click)="onSelect();false"