Angulaire 6 de routage redirection
Je suis nouveau sur Angular
et de l'écriture de mon premier Angular
application de tableau de bord d'administration.
J'ai pour l'installation de deux dispositions
- pour l'authentification comme la connexion, la déconnexion, j'ai oublié de mot de passe, etc
- tableau de bord d'administration viendra après la connexion
pour qui j'ai de l'installation de deux éléments de mise en page
- admin-mise en page
- auth-mise en page
et de mettre tous auth composants du module auth
La structure de répertoire de mon application, c'est comme
app
|- e2e
|- node_modules
|- src
|- app
|- auth (module)
|- login (component)
|- login.component.ts
|- login.component.html
|- register (component)
|- register.component.ts
|- register.component.html
|- auth.module.ts
|- dashboard (component for auth users)
|- dashboard.component.ts
|- dashboard.component.html
|- layouts ( directory)
|- admin-layout (component)
|- admin-layout.component.html
|- admin-layout.component.ts
|- admin-layout.module.ts
|- admin-layout.routing.ts
|- auth-layout (component)
|- auth-layout.component.html
|- auth-layout.component.ts
|- auth-layout.module.ts
|- auth-layout.routing.ts
|- app.component.html
|- app.component.ts
|- app.module.ts
|- app-routing.module.ts
|- assets
|- index.html
contenu de application de routage.le module.ts
import { NgModule } from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {HttpClientModule} from '@angular/common/http';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ComponentsModule} from './components/components.module';
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
@NgModule({
declarations: [
AppComponent,
AdminLayoutComponent,
AuthLayoutComponent
],
imports: [
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
RouterModule,
AppRoutingModule,
NgbModule.forRoot(),
ComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
contenu de application de routage.le module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';
import {CommonModule} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser';
import {AuthLayoutComponent} from './layouts/auth-layout/auth-layout.component';
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '', component: AdminLayoutComponent, children: [
{path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
] },
{ path: '', component: AuthLayoutComponent, children: [
{path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
]}
];
@NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
contenu de admin-layout.le routage.ts
import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent}
];
contenu de admin-layout.le module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AdminLayoutRoutes } from './admin-layout.routing';
import { DashboardComponent } from '../../dashboard/dashboard.component';
import { IconsComponent } from '../../icons/icons.component';
import {ChartsModule} from 'ng2-charts';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(AdminLayoutRoutes),
FormsModule,
ChartsModule,
NgbModule
],
declarations: [
DashboardComponent,
IconsComponent
]
})
export class AdminLayoutModule { }
contenu de auth-layout.le module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import {AuthLayoutRoutes} from './auth-layout.routing';
import {FormsModule} from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {AuthModule} from '../../auth/auth.module';
import {LoginComponent} from '../../auth/login/login.component';
import {RegisterComponent} from '../../auth/register/register.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(AuthLayoutRoutes),
FormsModule,
NgbModule,
AuthModule
],
declarations: [
LoginComponent,
RegisterComponent
]
})
export class AuthLayoutModule { }
contenu de auth-layout.le routage.ts
import {Routes} from '@angular/router';
import {LoginComponent} from '../../auth/login/login.component';
import {RegisterComponent} from '../../auth/register/register.component';
import {ForgotPasswordComponent} from '../../auth/forgot-password/forgot-password.component';
import {ResetPasswordComponent} from '../../auth/reset-password/reset-password.component';
export const AuthLayoutRoutes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{path: 'forgot-password', component: ForgotPasswordComponent},
{path: 'reset-password', component: ResetPasswordComponent}
];
Question
Sur l'accès à l' localhost:4200
est de la redirection vers localhost:4200/dashboard
et il travaille en tant que dashboard
chemin d'accès est défini dans l'admin de routage.
Mais sur l'accès à l' localhost:4200/login
est de la redirection vers localhost:4200
et de connexion de routage ne fonctionne pas à partir d'auth de routage.
Du code d'application, url: https://stackblitz.com/edit/angular-lwevqj
App url: https://angular-lwevqj.stackblitz.io
Vous devez vous connecter pour publier un commentaire.
Vos itinéraires devrait être comme -
Également votre auth routes devrait être comme -
Appels devraient être -
De connexion
localhost:4200/auth/login
Inscrivez -
localhost:4200/auth/register
De même d'autres
login
ouregiter
sans préfixe? signifie directement à/login
et/register
au lieu de/login/register
?/auth/login
et/auth/register
que ce serait mieux.admin route
./
, même/login
et/dashboard
sont maintenant rediriger vers/
. J'ai essayé en enlevant d'abord le chemin qui redirige vers/dashboard
même qu'ils sont de la redirection vers/
{ path: '**', redirectTo: 'dashboard'}
qui je l'ai enlevé plus tard aujourd'hui. Est-il provoquer la redirection?{ path: '**', redirectTo: 'dashboard'}
cewildcard
si aucun autre chemin de match, il sera celui par défaut. Remarque: les génériques doivent être conservés en dernier sinon tout redirige versdashboard
. Espérons que cela clairement bits.admin
etauth
à la fois les url, mais l'admin est travail etauth
est toujours rediriger vers/
stackblitz
. Il est difficile de dire ce qui se passe raté, comme siadmin
travailleauth
devrait fonctionner aussi bienVous devriez changer vos itinéraires principaux (remplacer "avec " login"), je pense que le problème est ici:
vous êtes en utilisant ce code { path: ", redirectTo: "tableau de bord", pathMatch: "full"} dans
(app-routage.le module.ts) fichier donc sur l'accès à l' localhost:4200 est de la redirection vers localhost:4200/tableau de bord et il travaille en tant que tableau de bord.
tout d'abord définir votre par défaut chemin d'accès de l'emplacement où vous souhaitez rediriger comme { path: ", redirectTo: "connexion", pathMatch: "full"}
si vous utilisez ce code, alors votre url de redirection automatique de composant login lorsque vous entrez dans localhost:4200.
/
sur la visite de/login
? il n'existe pas de chemin de redirection défini à l'exception/dashboard
. Ainsi, même si elle redirection, il convient de les rediriger vers/dashboard
Il est rediriger vers
/dashboard
que votre fichier de routage a défini sur le haut de rediriger tous les appels à composante tableau de bord.Voir la première
path
définition dans votre fichier de routageDans ce angulaire du projet, la hiérarchie est construite. Il a été supposé que l'utilisateur s'en aller vers le tableau de bord en premier.
Si vous voulez aller directement à la Connexion Composant simplement ajouter
/login
pour la connexion composante de la route dans votre fichier de routage.Mais s'il vous plaît prendre soin de routage dans votre module de connexion. Je suggère d'utiliser des enfants de routage de la forme
/child1/child2
que si vous voulez vraiment avoir à charge de l'url.Si vous voulez faire une partie de vos composants de la forme
/name
, ils doivent être présents à l'échelle mondiale.Vous pouvez en savoir plus sur Angulaire 6 Docs