Angular2应用程序在发射事件后重新加载

我对Angular2和SPA的开发很陌生，所以请原谅，如果这是一个愚蠢的问题。Angular2应用程序在发射事件后重新加载

我正在学习一个教程。使用了几个组件，当点击一个元素时，应该发射一个事件并由其他组件消耗。

<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]”。

任何人都可以给我一个关于如何解决这个问题的提示吗？

感谢您的提前。

来源

2017-02-22 Shumachine

我的猜测是，你以某种方式导致表单提交导致重新加载，但很难说没有更多的信息。 –

检查您的控制台日志中是否存在错误 – pixelbits

我做了 - 我保存了控制台日志并且没有错误。我确实想过那个表单提交的东西。但是没有定义表单。 – Shumachine

删除href =“”，你会使它工作。您正在重定向到页面并实际重新加载页面。 Angular 2应该只使用角度2路由器。

所以，你将不得不在未来的html代码：

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

来源

2017-02-22 08:13:23

太棒了！谢谢！ – Shumachine

相反的stopPropagation()你应该使用preventDefault()或返回false：

onSelect(event) { 
    event.preventDefault(); 

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

或

(click)="onSelect();false"

来源

2017-02-22 08:15:58

Angular2应用程序在发射事件后重新加载

回答

相关问题