Angular多组件复用同一templateUrl是否合规？有无更优方案？

我需要开发若干报表页面，这些报表视觉样式与交互逻辑一致，仅页眉、副标题及表格数据存在差异。原实现中每个报表组件对应独立的模板文件，代码大量重复。我通过让所有报表组件的templateUrl引用同一个通用模板文件实现了去重，该方案可正常运行，但担心违背Angular的组件设计特性，且未找到相关实践案例，因此咨询是否存在更推荐的实现方案。

优化前代码 #

多个报表组件模板（如report1.component.html、report2.component.html）存在重复代码：

<fancy-breadcrumb (linkClicked)="onLinkClicked($event)"></fancy-breadcrumb>
<div>Report 1</div>
<div>Sub Title 1</div>
<export-button title="Export Report" (click)="exportReport()"></export-button>

<!-- each component provides unique data in the follow div -->
<report-table [data]="data"></report-table> 

上述代码在其他三个组件模板中重复。

优化后代码 #

创建通用模板report-common.html：

<fancy-breadcrumb (linkClicked)="onLinkClicked($event)"></fancy-breadcrumb>
<div>{{ reportTitle }}</div>
<div>{{ reportSubTitle }}</div>
<export-button title="Export Report" (click)="exportReport()"></export-button>
<report-table [data]="data"></report-table>

所有报表组件（如report-1.component.ts）的templateUrl均引用该通用模板，不再保留独立模板文件。

你的当前方案能解决重复问题，但从Angular组件设计的内聚性和可维护性角度，更推荐以下几种方案：

1. 抽象基础报表组件+继承 #

定义抽象的基础报表组件，封装通用逻辑与模板，具体报表组件继承该类并传入差异化数据：

实现步骤： #

• 新建base-report.component.ts抽象类：

import { Component } from '@angular/core';

@Component({
  template: `
    <fancy-breadcrumb (linkClicked)="onLinkClicked($event)"></fancy-breadcrumb>
    <div>{{ reportTitle }}</div>
    <div>{{ reportSubTitle }}</div>
    <export-button title="Export Report" (click)="exportReport()"></export-button>
    <report-table [data]="data"></report-table>
  `
})
export abstract class BaseReportComponent {
  abstract reportTitle: string;
  abstract reportSubTitle: string;
  abstract data: any[];

  onLinkClicked(event: any) {
    // 通用面包屑点击逻辑
  }

  exportReport() {
    // 通用导出逻辑
  }
}

• 具体报表组件继承抽象类，仅实现差异化内容：

import { Component } from '@angular/core';
import { BaseReportComponent } from './base-report.component';

@Component({
  selector: 'app-report-1',
  // 无需单独模板，继承基础组件的模板
})
export class Report1Component extends BaseReportComponent {
  reportTitle = 'Report 1';
  reportSubTitle = 'Sub Title 1';
  data = [/* 报表1的独有数据 */];
}

这种方式既保证组件内聚性，又避免模板重复，符合Angular组件继承的设计思路。

2. 内容投影实现灵活布局 #

如果后续需要局部差异化布局，可使用Angular内容投影功能，创建通用报表容器组件，具体报表传入差异化内容：

通用容器组件report-container.component.ts： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-report-container',
  template: `
    <fancy-breadcrumb (linkClicked)="onLinkClicked($event)"></fancy-breadcrumb>
    <ng-content select="[title]"></ng-content>
    <ng-content select="[subTitle]"></ng-content>
    <export-button title="Export Report" (click)="exportReport()"></export-button>
    <ng-content select="[table]"></ng-content>
  `
})
export class ReportContainerComponent {
  onLinkClicked(event: any) {
    // 通用逻辑
  }

  exportReport() {
    // 通用导出逻辑
  }
}

具体报表组件使用方式： #

<app-report-container>
  <div title>Report 1</div>
  <div subTitle>Sub Title 1</div>
  <report-table table [data]="data"></report-table>
</app-report-container>

该方案适合需要灵活调整局部布局的场景，扩展性更强。

3. 单一通用组件+输入属性 #

如果差异化内容较少，可创建单一通用报表组件，通过@Input接收所有差异化数据：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-generic-report',
  template: `
    <fancy-breadcrumb (linkClicked)="onLinkClicked($event)"></fancy-breadcrumb>
    <div>{{ reportTitle }}</div>
    <div>{{ reportSubTitle }}</div>
    <export-button title="Export Report" (click)="exportReport()"></export-button>
    <report-table [data]="tableData"></report-table>
  `
})
export class GenericReportComponent {
  @Input() reportTitle!: string;
  @Input() reportSubTitle!: string;
  @Input() tableData!: any[];

  onLinkClicked(event: any) {
    // 通用逻辑
  }

  exportReport() {
    // 通用导出逻辑
  }
}

使用时直接传入参数： #

<app-generic-report 
  [reportTitle]="'Report 1'" 
  [reportSubTitle]="'Sub Title 1'" 
  [tableData]="data">
</app-generic-report>

这种方式最简单直接，组件职责单一，易于维护。

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