angular - 角度路由未重定向到正确的组件
问题描述
我正在创建一个博客应用程序,其中有一个管理端和一个用户端。我想将管理员和客户端的路由分成两个模块。但是在为客户端创建路由模块并将其导入到 app.module.ts 之后,它没有捕获客户端路由并返回 page-not-found 组件。下面是我的app.module.ts 文件
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { ClientModule } from './client/client-routing/client.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './client/home/home.component';
import { FooterComponent } from './client/footer/footer.component';
import { FeaturedBlogComponent } from './client/featured-blog/featured-blog.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
FooterComponent,
FeaturedBlogComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
应用程序路由.module.ts
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './client/home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'home', component: HomeComponent },
{path: '**', component: PageNotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
客户端.module.ts
import { CommonModule } from '@angular/common';
import { ClientRoutingModule } from './client-routing.module';
import { BlogListComponent } from '../blog-list/blog-list.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
@NgModule({
declarations: [BlogListComponent, BlogDetailComponent, AboutComponent, ContactComponent],
imports: [
CommonModule,
ClientRoutingModule
]
})
export class ClientModule { }
客户端路由.module.ts
import { Routes, RouterModule } from '@angular/router';
import { BlogListComponent } from '../blog-list/blog-list.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
const routes: Routes = [
{path: 'blogs', component: BlogListComponent},
{path: 'blog/:_id', component: BlogDetailComponent},
{path: 'about', component: AboutComponent},
{path: 'contact', component: ContactComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ClientRoutingModule { }
当我尝试访问 AboutComponent 或 BlogListComponent 等客户端路由时,它正在返回 page-not-found 组件
解决方案
由于您使用的是功能模块(即: ClientModule ),您的客户端模块路由尚未加载,只有 app-routing.module.ts 中的内容被急切加载。尝试在 app-router.module.ts 文件中延迟加载 ClientModule。
// Add this to routes array in app-router.module.ts.
{ path: 'blog', loadChildren: () => import('./path/to/client.module').then(m => m.ClientModule) }
然后像这样在你的 client-router.module.ts 中更新你的路由:
const routes: Routes = [
{
path: '', // Base route is now 'blog' or whatever you choose to call it in app-routing.module.ts.
component: BlogListComponent,
children: [ path: ':_id', component: BlogDetailComponent ]
},
{path: 'about', component: AboutComponent},
{path: 'contact', component: ContactComponent}
];
作为旁注,我会考虑将 About & Contact 路由重构为与 ClientModule 分开,除非这是您的目标。