webentwicklung-frage-antwort-db.com.de

Angular2 router.navigate Aktualisierungsseite

So sehen die Routen und Komponenten aus:

routen.config

export const routes: RouterConfig = [
   { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },   
   { path: 'users/new', component: NewUserComponent },    
];

neuer Benutzer.Komponente

 addField(newName: string){
        this.items.Push({ 
          name: newName,
      })
      this._router.navigate(['/users'])

Soll Angular2 die Seite auf router.navigate aktualisieren? 

Was sollte stattdessen von router.navigate verwendet werden, um eine Seitenaktualisierung zu vermeiden?

Hier ist der Beweis:  enter image description here

36

Sie rufen wahrscheinlich die Funktion router.navigate innerhalb eines Klickereignisses auf.

<button class="btn btn-default"
    (click)="save()">Save</button>

Und die Save-Funktion ist so etwas

save() {
    //Do stuff
    this._router.navigate(['/users', { id: userId } ]);
}

Dies funktioniert auf IE11- und Edge-Browsern, würde jedoch die Anwendung in Chrome neu laden.

Dies liegt an einer fehlenden type im Schaltflächenelement. Wenn sich die Schaltfläche in einem <form></form>-Code befindet, verwendet Chrome "submit" als Standardwert. Senden eines Formulars, wenn auf die Schaltfläche geklickt wird.

Es wird bevorzugt, immer eine type zu setzen, wenn Sie das button-Element verwenden Siehe hier:

Ändern Sie also den HTML-Code in

<button class="btn btn-default" type="button"
        (click)="save()">Save</button>

Funktioniert auf allen 3 Browsern.

Meine vorherige Lösung funktioniert auch (durch die Rückgabe von false würde dies die Standardaktion verhindern. A.k.a., die das Formular sendet), aber ich denke, dass die oben genannte bevorzugt wird.

Veraltete Antwort, aber für die Nachwelt aufbewahrt:

<button class="btn btn-default"
        (click)="save(); false">Save</button>
83
ElSnakeO

Ich hatte den gleichen Effekt (Seitenaktualisierung beim Navigieren zur Detailseite) mit einem einfachen <a href="/details/1"></a>-Link . Die Lösung bestand darin, den Winkellink zu verwenden: <a [routerLink]="['/details', 1]"></a>

2
Remy

Ich kenne die einfache Methode, aber Sie können diesen Code auch so einstellen, dass die Route bei einem Erfolgsereignis nach Abschluss des Vorgangs aktualisiert wird.

window.open ('Benutzer', '_self');

Es wird neu geladen und zur Benutzerseite umgeleitet.

1
Kavi Joshi

Für mich funktioniert Nizza (aus Komponentencode):

window.location.href = "/sth";

die Seite wird automatisch in den angegebenen URL-Teil geladen.

1
Krystian

Dies deckt eine AngularJS/Angular-Hybridsituation ab. Ich füge die Antwort hinzu, da diese Frage eines der Top-Ergebnisse ist, wenn Sie Probleme beim Neuladen von eckigen Routerseiten haben. Hoffentlich spart es jemand anderem Zeit. 

In meinem Fall hatte ich eine sehr einfache Angular 2 (eigentlich 5) -Routenkonfiguration, die meistens funktionierte, mit Ausnahme eines Falls, bei dem ein Link von einer Route zu einer anderen unerklärlicherweise ein Neuladen der Seite verursachen würde. Ich hatte nach allen üblichen Verdächtigen, Formular, Schaltfläche "Senden" usw. gesucht. 

Es stellte sich heraus, dass sich irgendwo in einer AngularJS - Komponente, die zum Zeitpunkt des Klickens auf den Link angezeigt wurde, ein ng-include befand. Die Dokumentation warnt dies aus einem bestimmten Grund. Die Vorlage wurde neu gemischt, sodass der ng-include in eine templateUrl geändert werden konnte und alles in Ordnung war. 

0
Tommy Hansen