Question

我正在创建一个博客应用程序，其中有管理员端和用户端。我想将管理和客户端的路由分隔为两个模块。但是在为客户端创建路由模块并将其导入到app.module.ts之后，它没有捕获客户端路由并返回页面未找到的组件。以下是我的 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 { }

app-routing.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 { }

client.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 { }

client-routing.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之类的客户端路由时，它正在返回页面未找到的组件

Answer 1

由于您正在使用功能模块（即：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分开进行重构。

角路由未重定向到正确的组件

1 个答案: