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