Angular 2 Full Reload auf router.navigate

Question

Ich habe ein Problem mit einer Umleitung nach einer Formularübergabe für die Anmeldung in Angular 2. Die Anwendung führt einen vollständigen Neuladen auf der Weiterleitung zum Dashboard. Ich habe mehrere Beiträge auf Stack-Überlauf & andere Blogs überprüft, ohne Glück. This ist der nächste; Es gibt jedoch keine Antwort auf den Thread. Siehe meinen Code unten.

Nachdem ich die Anmeldung gedrückt habe, wird die Seite geladen und dann erneut geladen. Die URL ändert sich auch, um die Abfragezeichenfolge in die URL zu stellen, von der ich vermute, dass sie das Problem verursacht. Wie kann ich dieses Problem beheben? Ich vermute, das hat etwas damit zu tun, wie meine Form aufgebaut ist.

auth.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { NgForm, FormBuilder, Validators } from '@angular/forms'; 
import { Router } from '@angular/router'; 

import { User } from '../shared/user'; 
declare var Materialize:any; 

import { AuthService } from '../shared/services/auth.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'logon', 
    templateUrl: 'auth.component.html', 
}) 
export class AuthComponent implements OnInit { 

    currentUser = new User(null, '', '', '', '', 'vistor'); 
    submitted = false; 
    authForm: NgForm; 
    @ViewChild('authForm') currentForm: NgForm; 

    constructor(
    private router: Router, 
    public authService: AuthService 
) { } 

    ngOnInit(): void { 
    } 

    onSubmit() { 
    this.submitted = true; 
    this.authService.login(this.currentUser).then(response => { 
     if (response) { 
     this.goToDashboard(); 
     } else { 
     var toastContent = '<span><b>Invalid email or password!</b></span>'; 
     Materialize.toast(toastContent, 5000, 'red'); 
     } 
    }); 
    } 

    goToDashboard() { 
    this.router.navigate(['dashboard']); 
    } 
} 

auth.component.html

<div class="container"> 
    <div class="card"> 
    <div class="card-content"> 
     <span class="card-title">Logon</span> 
     <form materialize #authForm="ngForm" class="col s12"> 

     <div class="input-field col s12"> 
      <input required class="validate" id="email" type="email" name="email" [(ngModel)]="currentUser.email" #email="ngModel" validate="email"> 
      <label for="email" data-error="Invalid Email">Email</label> 
     </div> 

     <div class="input-field col s12"> 
      <input required class="validate" id="password" type="password" name="password" [(ngModel)]="currentUser.password" #password="ngModel" validate="password"> 
      <label for="password" data-error="Invalid Password">Password</label> 
     </div> 

     <div class="card-action"> 
      <button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="submit">Log In 
      <i class="material-icons right">send</i> 
      </button> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

Angular 2 Routen

const routes: Routes = [ 
    { path: '', redirectTo: '/auth', pathMatch: 'full' }, 
    { path: 'dashboard', component: DashboardComponent }, 
    { path: 'spelling', component: SpellingComponent }, 
    { path: 'definition', component: DefinitionComponent }, 
    { path: 'auth', component: AuthComponent }, 
    { path: '**', redirectTo: '/dashboard', pathMatch: 'full' } 
]; 

Answer 1

Angular 2 benötigt einen Auftrag in Pfaden die korrekte Routing zeigen Ich denke, die Lösung hängt mit der Reihenfolge der Pfade zusammen. Zum Beispiel können Sie dies versuchen:

const routes: Routes = [ 
{ path: '', redirectTo: '/auth', pathMatch: 'full' }, 
{ path: 'auth', component: AuthComponent }, 
{ path: 'dashboard', component: DashboardComponent }, 
{ path: 'spelling', component: SpellingComponent }, 
{ path: 'definition', component: DefinitionComponent }, 
{ path: '**', redirectTo: '/dashboard' } 
]; 

und

goToDashboard() { 
this.router.navigate(['dashboard/']); 
} 

Answer 2

Verwenden Sie den Typ nicht wie in Angular Einseitig Anwendungen einreichen. Der Grund könnte

<button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="submit">Log In 
     <i class="material-icons right">send</i> 
</button> 

Versuchen Sie es mit

<button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="button">Log In 
     <i class="material-icons right">send</i> 
     </button>