Angular 7重定向到另一个页面。

Question

我有一个登录页面和仪表板组件。我的问题是，当我从页面登录时，仪表板显示在登录页面下方，而不是重定向为新页面。如何在 Angular 7 中实现这一点？任何帮助都将是有用的。谢谢！

app.component.ts

import { 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 = 'Shopping-cart';
  user = []
  users = []
  public Candidate = []
  public showWhen:boolean = false;

  constructor(private _router: Router){}

  authenticateLogin(user){
    let authUser = JSON.parse(localStorage.getItem('auth'))
    console.log(user);
    if(user.mail === authUser[0] && user.password === authUser[1]){
      this.showWhen = true;
      console.log("Logged in Successfully");
      this._router.navigate(['dashboard']);
    } else {
      console.error("Invalid email and password");
    }
  }

}

这是我的路由模块。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent} 
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

- Ben

---

在“路由”中，您只有一个路由 - 到仪表板 - 创建第二个路由到登录页面。 - Kamil Kiełczewski

@KamilKiełczewski 是的，你说得对！现在它会重定向到仪表板页面。感谢你的帮助。 - Ben

我接受了你的答案。我的投票没有显示，因为我的声望不到15分！ - Ben

Answer 1

在路由中，您只有一个路由 - 前往仪表板 - 请添加第二个路由到登录页面。

- Kamil Kiełczewski

Answer 2

你应该有另一条通往登录页面的路线。如果没有这个，你就不能对登录页面进行任何调用。

在你的代码部分中， 尝试使用以下代码块。

app.component.ts

authenticateLogin(user){
    let authUser = JSON.parse(localStorage.getItem('auth'))
    console.log(user);
    if(user.mail === authUser[0] && user.password === authUser[1]){
      this.showWhen = true;
      console.log("Logged in Successfully");
      this._router.navigate(['dashboard']);
    } else {
      this._router.navigate(['login']);
    }
  }

而且你应该在路由器中有另一个路径

app-routing.module.ts

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent} ,
  { path: 'login', component: LoginComponent(write your login component name)} 
];

- nafics

Answer 3

也许对于登录表单，可以创建自己的组件并将其添加到路由中。

- Sergey Ivchenko

---

是的，我确实像那样做了，问题是我没有将其添加到路由中。 - Ben