重定向到另一个页面Angular 2

Question

我有一个带有表单和一个按钮的登录页面来进行登录.当用户单击按钮时,我想评估密码和电子邮件,如果一切正确,则必须将用户重定向到另一个页面.

我的问题是我在登录html里面(<router-outlet></router-outlet>),这个新页面的所有信息都显示在登录页面的同一个地方,我不想混合这两个信息.我希望将登录信息与新信息分开.

我尝试使用window.location.href,但不能继续显示在登录的同一位置的信息.

这是我的路线配置.

export const routes: Routes = [
    { path: 'show_alunos', component: ListAlunosComponent }
];

组件ListAlunosComponent是我想在验证用户凭据后显示的新页面.

app.component.html

<form class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input [(ngModel)]="email" name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input [(ngModel)]="password" name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" (click)="submit()" type="submit">Sign in</button>
  </form>
  <router-outlet></router-outlet>

app.component.ts

mport { Component } from '@angular/core';
import { Router } from '@angular/router'

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
   public email: string;
   public password: string;

   constructor(private router: Router) {
       this.email = "";
       this.password = "";
    }

   public submit(): void {
        this.router.navigateByUrl(['show_alunos']);
   }
}

app.router.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ListAlunosComponent } from '../pages/list-alunos/list-
alunos.component';

// Route Configuration.
export const routes: Routes = [
    { path: 'show_alunos', component: ListAlunosComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Answer 1

检查完电子邮件和发送邮件后,请尝试:

router.navigate(['/show_alunos'])

并在构造函数声明

constructor (private router: Router)

并从"@ angular/router"导入{Router};

更新:

简单示例如何使用Ruter:

your.component.html:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="Email">
  <input type="password" formContolName="Password">
  <input type="submit" value="login">
</form>

your.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from "@angular/forms";
import { Router } from "@angular/router";

@Component({
  selector: 'component-tag-name',
  templateUrl: './your.component.html'
})

export class YourComponentName implements OnInit {

myForm: FormGroup;

constructor(private router: Router) {}

ngOnInit(){
 this.myForm = this.FormGroup({
   'Email': new FormConrol(null, [Validators.required]),
   'Password': new FormControl(null, [Validators.required])
  })
}

onSubmit(){
  let email = this.myForm.get('Email').value;
  let password = this.myForm.get('Password').value;

  if (email === 'your value' && password === 'your value'){
    this.router.navigate(['/show_alunos']);
  }   
}

在yout app.module.ts中,您还需要导入此组件和ListAlunosComponent.然后你需要导入这个组件并写入你的路由配置.ts文件:

{ path: 'show_alunos', component: ListAlunosComponent }