Angular 17独立组件：单页面展示多组件的路由配置方案

核心思路 #

不用直接把路由指向单个段落组件，先创建页面容器组件，把对应段落组件嵌套在容器里，再将路由规则指向这些容器组件即可实现单页面展示多个组件的需求。

具体步骤 #

1. 生成页面容器组件
   用Angular CLI创建两个页面容器，作为"第一页"和"第二页"的载体：

   ng generate component page1
   ng generate component page2
   

2. 在容器中嵌入段落组件

   • 打开page1.component.html，直接写入c1、c2组件的标签：

     <app-c1></app-c1>
     <app-c2></app-c2>
     

   • 打开page2.component.html，写入c3、c4组件的标签：

     <app-c3></app-c3>
     <app-c4></app-c4>
     

   （注：需确保你已提前生成c1、c2、c3、c4这四个段落组件）

3. 配置路由规则
   打开app.routes.ts，设置路径与页面容器组件的对应关系：

   import { Routes } from '@angular/router';
   import { Page1Component } from './page1/page1.component';
   import { Page2Component } from './page2/page2.component';
   
   export const routes: Routes = [
     { path: 'page1', component: Page1Component },
     { path: 'page2', component: Page2Component },
     { path: '', redirectTo: '/page1', pathMatch: 'full' } // 设置默认跳转至第一页
   ];
   

4. 确认根布局结构
   你的根组件app.component.html要保持Header、Footer和路由出口的结构，确保容器组件能正确嵌入：

   <app-header></app-header>
   <router-outlet></router-outlet> <!-- 此处会渲染page1或page2容器组件 -->
   <app-footer></app-footer>
   

完成以上配置后，访问/page1时，路由出口会加载Page1Component，进而展示c1和c2组件；访问/page2则会加载Page2Component，展示c3和c4组件，完全符合你的需求。

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