重定向到另一个页面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”导入{路由器}；

更新：

如何使用 Ruter 的简单示例：

你的.component.html：

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

你的.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']);
  }   
}

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

{ path: 'show_alunos', component: ListAlunosComponent }