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應用程序在發射事件後重新加載

回答

相關問題