Angular 角度6路由重定向
我不熟悉Angular 角度6路由重定向,angular,angular-routing,Angular,Angular Routing,我不熟悉Angular并为管理仪表板编写我的第一个Angular应用程序 我必须设置两个布局 用于身份验证,如登录、注销、忘记密码等 管理员仪表板将在登录后出现 为此,我设置了两个布局组件 管理布局 授权布局 并将所有auth组件放入auth模块中 我的应用程序的目录结构如下 app |- e2e |- node_modules |- src |- app |- auth (module) |- login (component) |-
Angular
并为管理仪表板编写我的第一个Angular
应用程序
我必须设置两个布局
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
应用程序路由.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 { }
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 { }
import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent}
];
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 { }
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 { }
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}
];
应用程序路由.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 { }
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 { }
import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent}
];
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 { }
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 { }
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}
];
管理布局.routing.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 { }
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 { }
import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent}
];
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 { }
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 { }
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}
];
管理布局.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 { }
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 { }
import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent}
];
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 { }
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 { }
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}
];
auth layout.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 { }
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 { }
import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent}
];
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 { }
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 { }
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}
];
auth layout.routing.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 { }
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 { }
import { Routes } from '@angular/router';
import {DashboardComponent} from '../../dashboard/dashboard.component';
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent}
];
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 { }
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 { }
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
,并在管理路由中设置路径
但是在访问localhost:4200/login
时,会重定向到localhost:4200
,并且登录路由无法通过身份验证路由工作
应用程序代码url:应用程序url:
你的路线应该是-
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'admin', component: AdminLayoutComponent, children: [
{path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
] },
{ path: 'auth', component: AuthLayoutComponent, children: [
{path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
]}
];
此外,您的身份验证路径应类似于-
export const AuthLayoutRoutes: Routes = [
{path: '', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{path: 'forgot-password', component: ForgotPasswordComponent},
{path: 'reset-password', component: ResetPasswordComponent}
];
电话应为-
登录-localhost:4200/auth/Login
注册-localhost:4200/auth/Register
与其他类似您应该更改主要路线(将“”替换为“登录”),我认为问题在于:
const routes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '', component: AdminLayoutComponent, children: [
{path: '', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'}
] },
{ path: 'login', component: AuthLayoutComponent, children: [
{path: '', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule'}
]}
];
您正在中使用以下代码{path:'',重定向到:'dashboard',pathMatch:'full'} (app routing.module.ts)文件,因此访问本地主机:4200时将重定向到本地主机:4200/dashboard,并作为仪表板工作 首先设置您想要重定向的默认路径位置,如{path:'',重定向到:'login',pathMatch:'full'}
如果您将使用此代码,则当您输入localhost:4200时,您的url将自动重定向到登录组件。它将重定向到
/dashboard
,正如您的全局路由文件在顶部定义的那样,将任何调用重定向到dashboard组件
查看全局路由文件中的第一个路径定义
在这个有角度的项目中,层次结构是建立起来的。假设用户将首先进入仪表板
如果您想直接转到登录组件,只需在全局路由文件中为登录组件路由添加/Login
但请注意登录模块中的路由。我建议仅当您真的想拥有依赖url时,才使用/child1/child2
形式的子路由
如果您希望使某些组件的形式为/name
,则它们应该全局显示
您可以在上查看更多信息。我是否可以不带任何前缀而路由到
登录
或注册者
?意思是直接在/login
和/register
而不是/login/register
?实际上,你必须在你的应用程序模块路由中区分你的路由,否则它将始终转到第一个匹配。我建议像/auth/login
和/auth/register
那样更好。我理解,但既然前两条路径最初在``侦听时是相同的,那么为什么第三条路径不起作用呢。此外,即使它不起作用,为什么要重定向?管理路由中没有重定向路径
{path:'',重定向到:'dashboard',pathMatch:'full'},这是在查找路径的完全匹配,所以如果您愿意,它将转到第二个。本地主机:4200/abc。你可以尝试将admin和auth混洗,auth可以工作,但admin不应该。我理解,但为什么在访问/login
时重定向到/
?除了/dashboard
之外,没有定义重定向路径。所以,即使它重定向,它也应该重定向到/dashboard
,那么您能告诉我默认情况下重定向路线在哪里吗?并告诉我您想在哪里导航您的路线(路径)?