如何在Angular懒加载标签页中复用基础组件并保留路由功能？

我按照Angular官方懒加载NgModules文档实现了标签页功能，现在需要把一个功能正常的基础组件复用在7个仅有少量差异的标签页中。当前标签页路由代码如下：

<nav mat-tab-nav-bar class="optiontabs">
    <a mat-tab-link *ngFor="let option of options"
    [routerLink]="option.theroute"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">{{option.label}}</a>
</nav>
<router-outlet></router-outlet>

options = [{
  label: "option1",
  theroute: "option1",
},
...]

单个标签页的路由配置（以option1为例）：

const routes: Routes = [{ path: '',component: baseComponent }, ];

基础组件的HTML结构：

<div class="summary-option-container">
    <app-template-table ></app-template-table>   
    <app-optiondetails></app-optiondetails>
    <app-chart></app-chart>
...
</div>

试过组件继承，但会重复HTML和CSS，不可行；试过<ng-template matTabContent>但无法保留路由功能，后续还要给标签页URL加参数（比如www.blabla.com/option1/xyz），所以这个方案也不行。想问怎么实现符合需求的组件复用？

给你两个针对性的方案，按需选择：

方案1：路由Data传递配置 + 基础组件动态适配（推荐） #

这个方案不用创建多余组件，直接复用baseComponent，通过路由携带差异化配置，组件读取配置后自动适配差异，完全保留路由功能，也支持后续添加URL参数。

步骤1：修改路由配置，添加差异化Data #

给每个标签页的路由添加data字段，存放该标签页的专属配置（比如表格列、图表类型、标识ID等）：

const routes: Routes = [
  { 
    path: 'option1', 
    component: BaseComponent,
    data: { 
      optionKey: 'option1',
      tableColumns: ['订单号', '金额'],
      chartType: 'bar'
    }
  },
  { 
    path: 'option2', 
    component: BaseComponent,
    data: { 
      optionKey: 'option2',
      tableColumns: ['用户ID', '注册时间'],
      chartType: 'line'
    }
  },
  // 剩下5个标签页同理，只改data里的配置内容
];

步骤2：在BaseComponent中读取路由Data #

通过ActivatedRoute获取路由携带的配置，用于动态渲染差异部分：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-base',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.css']
})
export class BaseComponent implements OnInit {
  currentConfig: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 初始加载时获取配置
    this.currentConfig = this.route.snapshot.data;
    // 如果需要支持同一个组件内切换路由（比如标签页切换时），监听data变化
    this.route.data.subscribe(data => {
      this.currentConfig = data;
    });
  }
}

步骤3：在BaseComponent的HTML中动态适配差异 #

把子组件的属性绑定到currentConfig，实现差异化渲染：

<div class="summary-option-container">
    <app-template-table [columns]="currentConfig.tableColumns"></app-template-table>   
    <app-optiondetails [optionId]="currentConfig.optionKey"></app-optiondetails>
    <app-chart [chartType]="currentConfig.chartType"></app-chart>
    <!-- 其他差异部分都通过currentConfig动态控制 -->
</div>

后续要加URL参数（比如/option1/123），只需要修改路由配置为path: 'option1/:id'，然后在BaseComponent里通过this.route.paramMap获取参数即可，完全不影响复用逻辑。

方案2：内容投影（适合模板有少量差异的场景） #

如果差异是模板内容（比如某个标签页多一个按钮、一段说明文字），可以用Angular的内容投影功能，给基础组件预留插槽，每个标签页只用写极简的投影组件。

步骤1：修改BaseComponent的HTML，添加投影插槽 #

<div class="summary-option-container">
    <app-template-table ></app-template-table>   
    <app-optiondetails></app-optiondetails>
    <app-chart></app-chart>
    <!-- 预留投影插槽，放每个标签页的差异化内容 -->
    <ng-content></ng-content>
</div>

步骤2：创建极简的标签页组件 #

比如创建Option1Component，只负责投影差异化内容：

<app-base>
    <!-- 这里放option1独有的内容，比如专属按钮 -->
    <button mat-raised-button color="primary">导出Option1数据</button>
</app-base>

其他6个标签页同理，每个组件只有几行HTML，不用写TS逻辑（除非有特殊交互），CSS也复用BaseComponent的。

步骤3：修改路由配置 #

把每个标签页的路由指向对应的极简组件：

const routes: Routes = [
  { path: 'option1', component: Option1Component },
  { path: 'option2', component: Option2Component },
  // 其他标签页路由配置
];

这个方案虽然要创建7个小组件，但每个组件几乎没有冗余代码，也完全保留路由功能，支持URL参数。

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