如何扩展Angular NgZorro的NzCardComponent并自定义标签与HTML？

要实现带自定义UI功能的<my-card>，仅继承组件类不够，必须通过自定义组件元数据+复用/修改原模板的方式来实现，具体步骤如下：

1. 创建自定义组件类，继承NzCardComponent #

直接继承NzCardComponent可以复用它的所有输入输出属性（比如nzTitle、nzBordered）和内置逻辑，同时在组件元数据里指定自定义的selector和模板：

import { Component, Input } from '@angular/core';
import { NzCardComponent } from 'ng-zorro-antd/card';

@Component({
  selector: 'my-card', // 自定义标签名
  // 自定义模板：复用NzCard结构并添加自定义UI
  template: `
    <div nz-card 
         [nzBordered]="nzBordered" 
         [nzHoverable]="nzHoverable" 
         [nzSize]="nzSize">
      <!-- 自定义头部：在原标题旁添加操作按钮 -->
      <div *ngIf="nzTitle || showCustomBtn" nz-card-header>
        <span *ngIf="nzTitle">{{ nzTitle }}</span>
        <button *ngIf="showCustomBtn" nz-button nzSize="small" type="text" (click)="handleCustomClick()">
          自定义操作
        </button>
      </div>
      <!-- 保留原卡片的内容插槽 -->
      <ng-content></ng-content>
      <!-- 自定义底部区域 -->
      <div *ngIf="customFooterText" nz-card-footer>
        {{ customFooterText }}
      </div>
    </div>
  `,
  styles: [`
    :host ::ng-deep .ant-card-header button {
      float: right;
      margin-top: -4px;
    }
  `]
})
export class MyCardComponent extends NzCardComponent {
  // 扩展自定义输入属性
  @Input() showCustomBtn = false;
  @Input() customFooterText?: string;

  // 自定义逻辑方法
  handleCustomClick(): void {
    console.log('自定义按钮被点击');
    // 可在此添加你的业务逻辑
  }
}

2. 注册自定义组件 #

在你的Angular模块中导入NzCardModule（依赖原卡片的指令和样式），并声明、导出自定义组件：

import { NgModule } from '@angular/core';
import { NzCardModule } from 'ng-zorro-antd/card';
import { MyCardComponent } from './my-card.component';

@NgModule({
  imports: [NzCardModule],
  declarations: [MyCardComponent],
  exports: [MyCardComponent] // 导出后可在其他模块使用
})
export class MyCardModule { }

3. 使用自定义标签 #

在模板中直接使用自定义标签，既可以用原NzCard的所有属性，也能使用扩展的自定义属性：

<my-card 
  nzTitle="用户信息卡片" 
  nzBordered="true"
  showCustomBtn="true"
  customFooterText="2024-05-20 更新">
  <p>姓名：张三</p>
  <p>邮箱：zhangsan@example.com</p>
</my-card>

注意事项 #

• 模板复用：上述模板参考了NzCard的原生结构，你可以根据需求调整，比如修改布局、添加更多自定义区域；
• 样式隔离：使用:host ::ng-deep来穿透样式隔离，修改原NzCard的默认样式；
• 版本兼容：如果后续Ng-Zorro更新了NzCard的模板结构，你需要同步更新自定义组件的模板，避免出现样式或功能异常。

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