我有一个登录页面和一个仪表板组件。我的问题是,当我从仪表板显示在登录页面下方的页面登录时,它没有重定向为新页面。如何在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 { }
答案 0 :(得分:4)
在Routes
中,您只有一条路线-通往信息中心-成为第二条登录路线
答案 1 :(得分:1)
您应该有另一条通往登录页面的路线。没有这些,您将无法对登录页面进行任何调用。
在您的代码部分中, 尝试这些代码块
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)}
];
答案 2 :(得分:0)
也许对于登录表单,创建您自己的组件并将其添加到路由中。