Angular封装ng-zorro按钮：兼容Nz属性与自定义属性

需求背景 #

我开发了一个可构建、可发布的Angular库，计划逐个封装Ng-Zorro的按钮等组件，核心目标包括：

• 用自定义属性选择器替代Ng-Zorro原生选择器
• 为原组件新增更多自定义属性
• 支持在消费组件的<button>标签上同时使用Ng-Zorro的[nzType]等原生属性和自定义的shape等属性，实现原生标签属性扩展并按需覆盖Ant样式

Ng-Zorro按钮组件源码分析 #

查看Ng-Zorro按钮源码可知，nz-button是通过@Component实现的（而非@Directive），核心代码如下：

@Component({
  selector: 'button[nz-button], a[nz-button]',
  exportAs: 'nzButton',
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <span nz-icon nzType="loading" *ngIf="nzLoading"></span>
    <ng-content></ng-content>
  `,
  host: {
    class: 'ant-btn',
    '[class.ant-btn-primary]': `nzType === 'primary'`,
    '[class.ant-btn-dashed]': `nzType === 'dashed'`,
    // ... 其他样式绑定逻辑
  }
})

当前封装组件代码 #

我已实现的按钮封装组件代码如下：

@Component({
  selector: 'button, a',
  preserveWhitespaces: false,
  imports: [
    NzButtonModule
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `<ng-content></ng-content>`,
  styleUrls: ['./button.component.scss'],
  standalone: true,
  host: {
    'nz-button': '',
    class: 'btn',
    '[class.btn-primary]': `color === 'primary'`,
    '[class.btn-secondary]': `color === 'secondary'`,
    // ... 其他自定义样式绑定逻辑
  }
})

export class ButtonComponent {
  @Input() size: ButtonSize = 'md';
  @Input() shape: ButtonShape = 'default';
  @Input() color: ButtonColor = 'primary';
  @Input() fill: ButtonFill = 'solid';
  @Input() expand: ButtonExpand = 'default';
}

核心诉求 #

希望在消费组件中使用<button>标签时，能够同时绑定Ng-Zorro的[nzType]等原生属性和自定义的shape、color等属性，既保留Ng-Zorro按钮的原有功能，又通过自定义属性扩展组件的样式与行为，并能按需覆盖Ant Design的默认样式。

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