我创建了一个角度应用程序版本7,项目结构是这样的 . app模块有app-routing.module.ts和仪表板模块有dashboard-routing module.ts . 在仪表板模块中,布局组件路径具有子组件,即home和admin .
Here is my code:
AppModule
import { AppRoutingModule } from './app-routing.module';
import { DashboardModule } from './dashboard/dashboard.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
DashboardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
App-routing module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
dashboard module file:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
@NgModule({
declarations: [LayoutComponent, HomeComponent, AdminComponent],
imports: [
CommonModule,
DashboardRoutingModule
]
})
export class DashboardModule { }
dashboard-routing module.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';
const dashboardRoutes: Routes = [
{
path: 'dashboard',
component: LayoutComponent,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'admin', component: AdminComponent}
]
}
];
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forChild(dashboardRoutes)
],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
问题是我想在localhost:4200上路由到仪表板布局,但它总是在每个路由上转到pageNotFound组件路由 . 任何人都可以指出问题是什么 .
Code on StackBlitz:
https://stackblitz.com/github/Ahsan9981/authGuardApp
Desired output
1 回答
路由器将按您导入它们的顺序匹配您的路由,因此,如果您添加通配符/ **以匹配appModule开头的所有路由,它将匹配此路由,然后检查您的其他路由是否与之匹配 .
要扩展示例 - 路由器将遍历所有已定义的路由,直到找到匹配为止,如果以catch all开头,它将停在那里并且不再继续 . 因此,在模块的开头(appRoutes)定义一个catch都是一个问题 .
您的仪表板模块会导入仪表板路径,因此在导入仪表板路径时将确定导入应用程序模块中的仪表板模块 .
您需要按照您认为匹配的顺序导入路线,并保留最后添加的通配符 . 这应该始终是带有通配符的后备 .
routing的文档中有一个特别的部分 .
如果还有不清楚的地方,请随意发表评论,我会相应地更新我的答案 .
亲切问候克里斯