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)

从＆＃34; @ angular / router＆＃34;;

导入{路由器}

更新：

如何使用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']);
  }   
}

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

{ path: 'show_alunos', component: ListAlunosComponent }

重定向到另一个页面Angular 2

1 个答案: