Angular可切换按钮/锚点元素的组件实现方案求助

要同时搞定元素切换和内部逻辑复用，核心思路是在组件内部根据输入属性动态渲染或元素，把加载状态、图标、内容投影这些逻辑全部封装在组件里，不用用户重复编写内部结构。下面是具体实现：

---

1. 组件类改造 #

新增控制元素类型的elementType输入属性，以及锚点需要的href、target属性，同时统一管理样式类：

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Color, Corner, Size, Variant } from 'src/app/type/core';
import { NgIconComponent } from '@ng-icons/core';

@Component({
  selector: 'mr-button',
  standalone: true,
  imports: [CommonModule, NgIconComponent],
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
})
export class ButtonComponent {
  // 控制渲染<button>还是<a>，默认button
  @Input() elementType: 'button' | 'anchor' = 'button';
  
  // 锚点专属属性
  @Input() href?: string;
  @Input() target?: '_self' | '_blank' | '_parent' | '_top';

  // 原有属性保留
  @Input() color: Color = 'primary';
  @Input() size: Size = 'md';
  @Input() corner: Corner = 'md';
  @Input() variant: Variant = 'solid';
  @Input() fluid: boolean = false;
  @Input() icon!: string;
  @Input() isLoading: boolean = false;

  // 计算样式类，替代模板里的字符串拼接
  get buttonClasses() {
    return {
      'btn': true,
      [`btn__${this.variant}`]: true,
      [`u_${this.color}`]: true,
      [`corner__${this.corner}`]: true,
      'u_singleline': true,
      'btn__fluid': this.fluid
    };
  }
}

2. 模板改造 #

用*ngIf切换

和元素，公共的内部结构（加载状态、图标、内容）直接复用：

<!-- 动态渲染<button>或<a> -->
<button
  *ngIf="elementType === 'button'; else anchorElement"
  [ngClass]="buttonClasses"
>
  <ng-container *ngIf="isLoading; else buttonContent">
    <span>Loading...</span>
  </ng-container>
  <ng-template #buttonContent>
    <ng-icon *ngIf="!!icon" strokeWidth="1.5" [name]="icon"></ng-icon>
    <span class="btn--text"><ng-content></ng-content></span>
  </ng-template>
</button>

<ng-template #anchorElement>
  <a
    [ngClass]="buttonClasses"
    [href]="href"
    [target]="target"
  >
    <ng-container *ngIf="isLoading; else anchorContent">
      <span>Loading...</span>
    </ng-container>
    <ng-template #anchorContent>
      <ng-icon *ngIf="!!icon" strokeWidth="1.5" [name]="icon"></ng-icon>
      <span class="btn--text"><ng-content></ng-content></span>
    </ng-template>
  </a>
</ng-template>

3. 使用示例 #

调用方式和初始方案一样简单，只需要通过elementType切换元素类型，锚点时传入href即可：

<!-- 普通按钮 -->
<mr-button variant='solid'>Hello world</mr-button>

<!-- 带图标的加载按钮 -->
<mr-button 
  variant='outline' 
  icon="heroicons:arrow-right" 
  isLoading="true"
>
  Submit
</mr-button>

<!-- 锚点链接 -->
<mr-button 
  elementType="anchor" 
  href="/about" 
  target="_blank"
  color="secondary"
>
  Go to About
</mr-button>

核心优势 #

• 元素切换灵活：通过elementType一键切换

和，锚点的href、target属性按需传入

内部逻辑复用：加载状态、图标渲染、内容投影都封装在组件内，用户不用重复编写内部结构

易用性保留：调用方式和初始方案一致，学习成本低

样式统一管理：通过计算属性buttonClasses集中管理样式类，避免模板字符串拼接的维护问题

---

内容的提问来源于stack exchange，提问作者Hamza Miloud Amar