重定向到另一页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

后您检查电子邮件和passwork尝试：

router.navigate(['/show_alunos']) 

而在构造申报

constructor (private 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应用.module.ts你也需要导入这个组件和ListAlunosComponent。然后，您需要导入这些组件并写入您的路由配置.ts文件中：

{ path: 'show_alunos', component: ListAlunosComponent }