Angular二级子组件Posts无法在Blog组件中加载渲染问题求助

你遇到的问题核心是路由配置冲突导致嵌套路由未生效。目前你的AppRoutingModule里直接将/blog路径绑定到BlogComponent，但BlogModule内部又定义了以blog为父路径的嵌套路由，这就造成Angular无法正确识别子路由的层级关系，因此PostsComponent无法渲染在BlogComponent内部的<router-outlet>中。

具体修正步骤 #

1. 调整AppRoutingModule的路由配置 #

将直接绑定BlogComponent的路由替换为加载BlogModule的路由（推荐懒加载方式），同时设置根路径重定向到/blog：

// app.routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { CandidatosComponent } from './candidatos/candidatos.component';
import { AboutComponent } from './about/about.component';

const appRoutes: Routes = [
  // 根路径重定向到blog页面
  { path: '', redirectTo: 'blog', pathMatch: 'full' },
  // 懒加载BlogModule，交由其内部路由处理子路径
  { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) },
  { path: 'candidatos', component: CandidatosComponent },
  { path: 'sobre', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修改BlogRoutingModule的父路由路径 #

因为AppRoutingModule已经指定了/blog作为父路径前缀，所以BlogRoutingModule里的父路由只需用空路径即可：

// blog.routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { BlogComponent } from './blog.component';
import { PostsComponent } from './posts/posts.component';
import { NewsComponent } from './news/news.component';
import { EstudosComponent } from './estudos/estudos.component';

const blogRoutes: Routes = [
  { 
    path: '', // 对应/app路由里的/blog路径
    component: BlogComponent, 
    children: [
      { path: '', component: PostsComponent }, // /blog 默认加载Posts
      { path: 'posts', component: PostsComponent }, // /blog/posts
      { path: 'news', component: NewsComponent }, // /blog/news
      { path: 'estudos', component: EstudosComponent } // /blog/estudos
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(blogRoutes)],
  exports: [RouterModule]
})
export class BlogRoutingModule { }

3. 确保BlogModule导入自身路由模块 #

检查BlogModule是否正确导入了BlogRoutingModule，这样内部路由配置才会生效：

// blog.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BlogComponent } from './blog.component';
import { PostsComponent } from './posts/posts.component';
import { NewsComponent } from './news/news.component';
import { EstudosComponent } from './estudos/estudos.component';
import { AsideComponent } from './aside/aside.component';
import { BlogRoutingModule } from './blog.routing.module';

@NgModule({
  declarations: [
    BlogComponent,
    PostsComponent,
    NewsComponent,
    EstudosComponent,
    AsideComponent
  ],
  imports: [
    CommonModule,
    BlogRoutingModule // 必须导入才能启用内部路由
  ]
})
export class BlogModule { }

为什么这样修改？ #

• 原来的AppRoutingModule直接渲染BlogComponent，没有关联其内部的子路由配置，Angular无法知道BlogComponent内部还有<router-outlet>需要加载子组件。
• 通过loadChildren加载BlogModule，Angular会读取BlogModule中的路由配置，识别到BlogComponent的子路由，从而将PostsComponent渲染到对应的<router-outlet>中。

完成以上修改后，访问根路径或/blog时，BlogComponent会正常加载，同时PostsComponent会渲染在你指定的<router-outlet>位置。

内容的提问来源于stack exchange，提问作者João Marcos Duarte