Angular单路由加载多组件：搜索路由如何同时展示多组件？

嘿，这个需求其实可以通过两种常见方式实现，我给你详细拆解一下：

方案一：使用容器组件（简单直观，适合快速落地） #

这个思路很直接：创建一个专门的搜索结果容器组件，把你需要同时展示的三个目标组件整合进去，再通过路由指向这个容器组件就行，不用折腾复杂的多出口配置。

1. 生成搜索容器组件
   用Angular CLI快速创建：

ng generate component search-results

2. 配置容器组件模板
   在search-results.component.html里直接引入三个组件的标签，你可以根据页面布局调整它们的位置：

<div class="search-results-container">
  <app-project></app-project>
  <app-business></app-business>
  <app-category></app-category>
</div>

如果需要给组件传递搜索关键词，要么用@Input输入属性，要么让组件自己从路由里取参数（更推荐后者，耦合性更低）。

3. 添加搜索路由规则
   把搜索路由加到你原来的子路由数组里：

{ 
  path: 'search/:keyword', 
  component: SearchResultsComponent 
}

要是偏好查询参数的形式（比如/search?keyword=xxx），可以改成：

{ 
  path: 'search', 
  component: SearchResultsComponent 
}

4. 组件内获取搜索关键词
   在ProjectComponent、BusinessComponent、CategoryComponent里注入ActivatedRoute来获取参数，再执行搜索逻辑：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  // 路径参数的情况（/search/angular）
  this.route.paramMap.subscribe(params => {
    const keyword = params.get('keyword');
    // 这里调用你的搜索服务，根据keyword过滤数据
  });

  // 查询参数的情况（/search?keyword=angular）
  this.route.queryParamMap.subscribe(params => {
    const keyword = params.get('keyword');
    // 处理搜索逻辑
  });
}

方案二：使用多路由出口（更灵活，适合复杂场景） #

如果不想额外创建容器组件，Angular支持多命名router-outlet，可以让一条路由同时在多个出口加载不同组件。

1. 修改MainComponent模板
   在原来的默认路由出口之外，新增两个命名出口，方便指定不同组件的加载位置：

<!-- 默认出口：加载ProjectComponent -->
<router-outlet></router-outlet>
<!-- 命名出口1：加载BusinessComponent -->
<router-outlet name="business"></router-outlet>
<!-- 命名出口2：加载CategoryComponent -->
<router-outlet name="category"></router-outlet>

你可以给这些出口加样式，调整它们在页面上的布局。

2. 更新路由配置
   注意这里要用components（复数）代替component，给每个出口绑定对应的组件：

{ 
  path: 'search/:keyword', 
  components: {
    default: ProjectComponent, // 默认出口对应ProjectComponent
    business: BusinessComponent, // 命名出口business对应BusinessComponent
    category: CategoryComponent // 命名出口category对应CategoryComponent
  }
}

3. 组件内获取搜索关键词
   和方案一完全一致，通过ActivatedRoute获取关键词后执行各自的搜索逻辑即可。

小提醒 #

• 不管用哪种方案，都要确保三个组件的搜索逻辑是独立的，各自根据关键词拉取匹配的数据。
• 如果需要组件间联动（比如选中项目后同步更新业务组件的结果），可以通过Angular服务（Service）来实现通信。
• 尽量不要把搜索路由设为空路径，会和你原来的默认路由冲突，用明确的search路径更稳妥。

内容的提问来源于stack exchange，提问作者Akhil Tyagi