我是 Angular
的新手,并为管理仪表板编写了我的第一个 Angular
应用程序 .
我必须设置两个布局
-
用于身份验证,如登录,注销,忘记密码等
-
管理员仪表板将在登录后到来
为此我设置了两个布局组件
-
admin-layout
-
auth-layout
并将所有auth组件放入auth模块中
我的应用程序的目录结构是这样的
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
app-routing.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 { }
app-routing.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 { }
admin-layout.routing.ts 的内容
import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent}
];
admin-layout.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 { }
auth-layout.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 { }
auth-layout.routing.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}
];
问题
在访问 localhost:4200
时重定向到 localhost:4200/dashboard
并且它正在工作,因为 dashboard
路径在管理路由中设置 .
但访问 localhost:4200/login
时重定向到 localhost:4200
,登录路由无法通过身份验证路由 .
应用代码网址:https://stackblitz.com/edit/angular-lwevqj应用网址:https://angular-lwevqj.stackblitz.io
4 回答
你的路线应该像 -
您的身份验证路线也应该像 -
电话应该是 -
登录 -
localhost:4200/auth/login
注册 -localhost:4200/auth/register
同样的其他人您应该更改主要路线(将''替换为'登录'),我认为问题在于:
您在 (app-routing.module.ts) 文件中使用此代码 { path: '', redirectTo: 'dashboard', pathMatch: 'full' } ,因此访问 localhost:4200 时重定向到 localhost:4200/dashboard 并且它作为仪表板工作 .
首先设置您想要重定向的默认路径位置,如 { path: '', redirectTo: 'login', pathMatch: 'full' } ,如果您将使用此代码,那么当您输入 localhost:4200 时,您的网址会自动重定向到登录组件 .
它正在重定向到
/dashboard
,因为您的全局路由文件已在顶部定义,以重定向任何对Dashboard组件的调用 .See the first path definition in your global routing file
在这个角度项目中,构建了层次结构 . 假设用户将首先转到仪表板 .
如果要直接转到Login Component,只需在全局路由文件中为登录组件路由添加
/login
.但请注意登录模块中的路由 . 我建议只有在你真的想拥有那个依赖网址时才使用
/child1/child2
形式的子路由 .如果您想使某些组件的形式为
/name
,则它们应该全局存在 .你可以在Angular 6 Docs上看到更多