发出事件后Angular2 App重新加载

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);
}

我故意评论了最后一行，因为我试图调试这个东西。通常，事件应该被发射和消耗。但是在日志输入后，App立即重新加载。在控制台中的chrome中，我可以看到＆＃34;导航到[url]＆＃34;。

有人能给我一个如何解决这个问题的提示吗？

提前致意并表示感谢。

Answer 1

删除href =＆＃34;＆＃34;你会让它发挥作用。您正在重定向到页面并实际重新加载页面。 Angular 2应该只使用angular 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"

Answer 3

如果使用任何形式，请尝试将按钮类型更改为“按钮”。对我有用