Angular2 Appイベントが発生した後にリロードする

Question

Angular2とSPAの開発にはまったく静かなので、愚かな質問の場合は申し訳ありません。

私はチュートリアルに従っています。いくつかのコンポーネントが使用され、1つの要素をクリックすると、他のコンポーネントによって消費されたイベントが放出されます。次のような方法が

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

と呼ばれ、それぞれの構成要素で

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

私は事をデバッグしようとしていたので、私は、意図的に最後の行をコメントアウト。通常、イベントは放射され、消費されます。しかし、ログエントリの直後に、Appがリロードされます。コンソールのクロムには「[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"