Question

我在登录Angular 2的表单提交后执行重定向时遇到问题。应用程序在重定向到仪表板时执行完全重新加载。我已经检查了几个关于堆栈溢出和发布的帖子其他博客，没有运气。 This是最接近的一个;但是，线程上没有答案。请参阅下面的代码。

按下登录后，页面加载，然后重新加载。 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>

Angular 2 Routes

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需要路径中的顺序来显示正确的路由，我认为解决方案与路径的顺序有关。例如，您可以尝试：

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

Answer 2

不要在Angular Single Page应用程序中使用该类型作为提交。原因可能是

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

router.navigate上的Angular 2 Full Reload

2 个答案: