Angular中如何在单页展示不同组件及路由组件配置问题求助

看起来你是想实现两种路由场景：一是根路径展示所有拆分的组件，二是其他路由只显示对应专属组件，但子路由配置没达到预期。我来帮你梳理下问题和可行的解决方案：

先排查当前配置的核心问题 #

你现在的路由配置是把BannerComponent作为父路由，VideoComponent作为它的子路由，/home是独立路由。这个思路本身没问题，但如果BannerComponent的模板里没有添加<router-outlet>标签，子组件VideoComponent是无法渲染出来的。这很可能是你配置后没看到预期效果的原因。

给你举个例子，BannerComponent的模板得这么写：

<!-- banner.component.html -->
<!-- 这里放Banner自身的内容 -->
<div class="banner-container">
  <h1>我的着陆页横幅</h1>
</div>
<!-- 必须加这个标签，子路由组件才会在这里渲染 -->
<router-outlet></router-outlet>

根据你的需求选对应的方案 #

方案1：根路径显示所有组件，其他路由完全独立 #

如果你的需求是：

• 访问/时，展示所有拆分的组件（比如Banner、Video、Footer等）
• 访问/home时，只显示AboutComponent，完全不加载根路径的那些组件

那更清晰的做法是创建一个专门的LandingPageComponent，把所有需要在着陆页展示的组件都整合到它的模板里：

<!-- landing-page.component.html -->
<app-banner></app-banner>
<app-video></app-video>
<app-footer></app-footer>
<!-- 其他需要展示的组件 -->

然后修改路由配置：

const routes: Routes = [
  { path: '', component: LandingPageComponent }, // 根路径展示所有组件
  { path: 'home', component: AboutComponent }    // /home仅显示About组件
];

方案2：部分组件全局显示，内容区域动态切换 #

如果你的需求是某些组件（比如Banner）要在多个路由中都显示，只有内容区域随路由变化（比如/显示Video，/home显示About），那应该用「布局组件+子路由」的模式：

1. 先创建一个MainLayoutComponent，把需要全局显示的组件放在这里：

<!-- main-layout.component.html -->
<app-banner></app-banner> <!-- 这个组件在所有子路由页面都会显示 -->
<!-- 动态内容的占位符 -->
<router-outlet></router-outlet>

2. 调整路由配置，把所有需要共享全局组件的路由都作为布局组件的子路由：

const routes: Routes = [
  { 
    path: '', 
    component: MainLayoutComponent, 
    children: [
      { path: '', component: VideoComponent },    // / 显示Banner + Video
      { path: 'home', component: AboutComponent } // /home 显示Banner + About
    ]
  }
];

这样就能实现部分组件跨路由展示，内容区域根据路径动态切换的效果了。

你可以根据自己的实际需求选上面的方案，要是还有细节问题可以补充说明~

内容的提问来源于stack exchange，提问作者Raza Chishti