Angular2 App nach dem Auslösen der Veranstaltung neu laden

Question

Ich bin ruhig neu in Angular2 und SPA Entwicklung, also bitte entschuldigen Sie, wenn das eine dumme Frage ist.

Ich folge einem Tutorial. Mehrere Komponenten werden verwendet, und wenn auf ein Element geklickt wird, wird ein Ereignis ausgegeben, das von anderen Komponenten verbraucht wird.

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

In der jeweiligen Komponente wird das folgende Verfahren

genannt

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

ich die letzte Zeile aus absichtlich kommentiert, weil ich das Ding zu debuggen versuchte. Normalerweise sollte das Ereignis ausgesendet und konsumiert werden. Aber sofort nach dem Log-Eintrag wird die App neu geladen. In Chrome in der Konsole kann ich "Navigated to [url]" sehen.

Kann mir jemand einen Hinweis geben, wie man das löst?

Grüße und danke im Voraus.

Answer 1

Entfernen Sie href = "" und Sie werden es schaffen. Sie leiten die Seite um und laden die Seite neu. Angular 2 sollte nur Winkel 2 Router verwenden.

So werden Sie die nächste HTML-Code haben:

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

Answer 2

Statt stopPropagation() Sie preventDefault() verwenden sollten, oder Rückkehr false:

onSelect(event) { 
    event.preventDefault(); 

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

oder

(click)="onSelect();false"