Angular 2完全重新载入router.navigate

我在登录Angular 2时进行表单提交后执行重定向时遇到问题。应用程序在重定向到仪表板时执行完全重新载入。我已经检查了其他博客堆栈溢出&的几篇帖子，但没有运气。 This是最接近的一个;但是，线程上没有答案。看到我的代码如下。Angular 2完全重新载入router.navigate

我按登录后，页面加载，然后再次重新加载。该URL也正在改变，把查询字符串放在URL中，我怀疑是造成这个问题。我该如何解决这个问题？我怀疑是与我的表单设置方式有关。

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>

角2个路由

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' } 
];

来源

2016-12-05 technogeek1995

角2需要路径的为了显示正确的路由，我认为解决方案与路径顺序有关。例如，你可以试试这个：

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' } 
];

和

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

来源

2016-12-05 22:48:55

我尝试这些变化并没有改变我的身份验证页面后，具有查询字符串的问题尝试。 – technogeek1995

不要使用类型为角单页的应用程序提交。究其原因可能是

<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>

使用

<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>

来源

2017-04-07 12:43:04 Hash

Angular 2完全重新载入router.navigate

回答

相关问题