web-dev-qa-db-fra.com

angular 7 redirection vers une autre page

J'ai une page de connexion et un composant de tableau de bord. Mon problème est que lorsque je me connecte à partir de la page que le tableau de bord affiche sous la page de connexion, il ne redirige pas en tant que nouvelle page. Comment y parvenir dans angular = 7? Toute aide serait utile. "Merci !!

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");
    }
  }

}

Ceci est mon module de routage

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 { }
typescriptangular-routingangular7
6
Ben

Vous devriez avoir un autre itinéraire vers la page de connexion. Sans cela, vous ne pouvez pas appeler la page de connexion.

Dans votre partie de code, essayez ces morceaux de code

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']);
    }
  }

et vous devriez avoir n autre chemin de routeur in

app-routing.module.ts

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

Peut-être pour un formulaire de connexion, créez votre propre composant et ajoutez-le à l'itinéraire.

0
Sergey Ivchenko