Angular中如何让继承基类的组件复用基类HTML模板

方案一：直接复用基类的模板文件 #

这是最直接的方式，子类组件通过templateUrl直接指向基类组件的HTML文件，同时继承基类的TS逻辑，实现表格复用。

1. 创建基类组件 #

首先创建基类的三个文件：base-table.component.ts、base-table.component.html、base-table.component.scss

基类TS文件：定义表格所需的输入属性和基础逻辑

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

@Component({
  selector: 'app-base-table', // 若不需要单独使用基类组件，可留空或设为内部标识
  templateUrl: './base-table.component.html',
  styleUrls: ['./base-table.component.scss']
})
export class BaseTableComponent {
  // 表格数据输入
  @Input() tableData: any[] = [];
  // 列定义：key对应数据字段，label为表头显示文本
  @Input() columnDefs: { key: string; label: string }[] = [];
}

基类HTML文件：实现通用表格结构

<table class="base-table">
  <thead>
    <tr>
      <th *ngFor="let col of columnDefs">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableData">
      <td *ngFor="let col of columnDefs">{{ row[col.key] }}</td>
    </tr>
  </tbody>
</table>

基类SCSS文件：通用表格样式

.base-table {
  width: 100%;
  border-collapse: collapse;
  
  th, td {
    border: 1px solid #e0e0e0;
    padding: 8px;
    text-align: left;
  }
  
  th {
    background-color: #f5f5f5;
    font-weight: 600;
  }
}

2. 创建子类组件并复用基类模板 #

子类组件继承基类的TS类，同时在@Component装饰器中指定基类的HTML和样式文件，可额外添加子类专属样式。

子类TS文件：

import { Component, OnInit } from '@angular/core';
import { BaseTableComponent } from '../base-table/base-table.component';

@Component({
  selector: 'app-user-table',
  // 直接引用基类的HTML文件
  templateUrl: '../base-table/base-table.component.html',
  // 同时引入基类样式和子类自定义样式
  styleUrls: ['../base-table/base-table.component.scss', './user-table.component.scss']
})
export class UserTableComponent extends BaseTableComponent implements OnInit {
  // 子类专属数据
  userData = [
    { id: 1, name: '张三', email: 'zhangsan@example.com' },
    { id: 2, name: '李四', email: 'lisi@example.com' }
  ];

  ngOnInit(): void {
    // 初始化基类的列定义
    this.columnDefs = [
      { key: 'id', label: '用户ID' },
      { key: 'name', label: '用户名' },
      { key: 'email', label: '邮箱' }
    ];
    // 给基类的表格数据赋值
    this.tableData = this.userData;
  }
}

子类SCSS文件：添加子类专属样式（可选）

// 例如修改特定列的样式
.base-table td:nth-child(3) {
  color: #1976d2;
}

方案二：组合式复用（适合需扩展基类模板的场景） #

如果子类需要在基类表格的基础上添加自定义内容（如标题、操作按钮），可以将基类组件作为子组件嵌入子类模板，无需继承TS类（若需要复用逻辑仍可继承）。

子类HTML文件：

<div class="user-table-container">
  <h3>用户管理列表</h3>
  <!-- 嵌入基类组件，传递数据 -->
  <app-base-table 
    [tableData]="userData" 
    [columnDefs]="columnDefs"
  ></app-base-table>
  <button class="add-btn" (click)="handleAdd()">添加用户</button>
</div>

子类TS文件：

import { Component } from '@angular/core';
// 若需复用基类逻辑，仍可继承BaseTableComponent
import { BaseTableComponent } from '../base-table/base-table.component';

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html',
  styleUrls: ['./user-table.component.scss']
})
export class UserTableComponent extends BaseTableComponent {
  userData = [/* 数据内容 */];

  ngOnInit() {
    this.columnDefs = [/* 列定义 */];
    this.tableData = this.userData;
  }

  handleAdd() {
    // 子类专属操作逻辑
  }
}

注意事项 #

• 基类组件需在Angular模块中声明，确保子类能正常引用其模板和逻辑。
• 继承基类后，子类可直接使用基类的@Input、@Output属性及方法，无需重复定义。
• 若基类不需要单独作为组件使用，可将其selector设为非公开标识，避免被误引用。

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