Angular 12中多组件共用templateUrl的可行性及最优方案

多个组件配置相同templateUrl是否可行？ #

Angular 框架本身没有限制多个组件的templateUrl指向同一个HTML模板文件，语法层面完全支持，直接配置不会触发编译或运行错误。

但该方案不推荐使用，存在明显的缺陷：

• 模板与多个组件逻辑强耦合，后续修改模板绑定的属性、方法名时，需要同步修改所有关联组件的TS文件，漏改就会引发运行时报错
• 无法适配后续单个组件的模板定制需求，扩展性极差

最优实现路径 #

根据后续是否存在模板定制需求，可二选一，优先推荐方案2： #

方案1：抽象基础组件继承（无模板定制需求时使用） #

将模板绑定的所有公共属性、方法封装到无@Component装饰器的抽象基础类中，4个业务组件全部继承该基础类，各自维护独有的业务逻辑即可。
代码示例：

// 抽象基础类，无需声明为组件
export abstract class BaseTemplateComponent {
  // 模板绑定的公共属性
  public pageTitle: string;
  public dataList: any[];

  // 模板绑定的公共方法
  public handleFormSubmit(): void {
    // 通用提交逻辑
  }
}

// 业务组件A
@Component({
  selector: 'app-business-a',
  templateUrl: './shared-template.html'
})
export class BusinessAComponent extends BaseTemplateComponent {
  // 组件A独有逻辑
  private getAExclusiveData(): void {
    // 专属数据请求
  }

  // 可重写基础类公共方法适配自有逻辑
  public override handleFormSubmit(): void {
    super.handleFormSubmit();
    // 追加A专属提交逻辑
  }
}

方案2：公共封装组件+内容投影（存在定制需求时优先选） #

将公共模板封装为独立的通用组件，通过@Input接收动态参数，@Output抛出交互事件，预留ng-content插槽支持各业务组件插入专属模板内容。4个业务组件各自的模板中直接引用该通用组件即可，业务逻辑完全独立维护。
代码示例：

// 公共模板组件
@Component({
  selector: 'app-shared-template',
  template: `
    <div class="common-header">{{title}}</div>
    <!-- 预留插槽，支持业务组件插入独有内容 -->
    <ng-content></ng-content>
    <button class="common-submit" (click)="submitEvent.emit()">提交</button>
  `
})
export class SharedTemplateComponent {
  @Input() title: string;
  @Output() submitEvent = new EventEmitter<void>();
}

业务组件A的模板文件：

<app-shared-template 
  [title]="'组件A专属标题'" 
  (submitEvent)="handleASubmit()"
>
  <!-- 组件A独有的模板内容 -->
  <div class="a-exclusive-block">仅A需要显示的表单字段</div>
</app-shared-template>

该方案是Angular官方推荐的组件复用范式，耦合度最低、扩展性最强，即便后续部分组件需要调整模板，也不会影响其他关联组件。

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