Angular技术问询：如何实现支持文本/图标/文本+图标的按钮组件？

嘿，作为Angular和TypeScript新手，这个需求其实挺典型的——咱们可以通过**输入属性（@Input）**和模板条件渲染来轻松实现这个支持多种显示模式的按钮组件。下面是一步步的实现方案：

1. 完善组件类（button-icon-text-component.ts） #

首先，我们给组件添加可配置的输入属性，让父组件能控制按钮的显示类型、文本内容和图标信息：

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

// 定义按钮显示类型的约束，让参数更规范
type ButtonDisplayType = 'text-only' | 'icon-only' | 'text-icon';

@Component({
  selector: 'app-button-icon-text',
  templateUrl: './button-icon-text.component.html',
  styleUrls: ['./button-icon-text.component.css']
})
export class ButtonIconTextComponent implements OnInit {
  // 按钮显示类型，默认设为仅文本模式
  @Input() displayType: ButtonDisplayType = 'text-only';
  // 按钮文本内容，默认值保留你原来的测试文本
  @Input() buttonText: string = 'TEST BUTTON';
  // 图标类名（假设用Font Awesome这类图标库，直接传类名即可）
  @Input() iconClass: string = 'fa-solid fa-circle';

  constructor() { }

  ngOnInit() { }
}

2. 编写条件渲染的模板（button-icon-text-component.html） #

接下来修改模板，用ngSwitch根据displayType决定显示文本、图标还是两者都有，逻辑更清晰：

<button class="custom-button" [ngSwitch]="displayType">
  <!-- 仅图标模式 -->
  <ng-container *ngSwitchCase="'icon-only'">
    <i [class]="iconClass"></i>
  </ng-container>
  <!-- 仅文本模式 -->
  <ng-container *ngSwitchCase="'text-only'">
    {{ buttonText }}
  </ng-container>
  <!-- 文本+图标模式 -->
  <ng-container *ngSwitchCase="'text-icon'">
    <i [class]="iconClass"></i>
    <span>{{ buttonText }}</span>
  </ng-container>
</button>

如果你觉得ngSwitch太繁琐，也可以用*ngIf简化写法：

<button class="custom-button" style="display:flex;align-items:center;gap:8px;">
  <i *ngIf="displayType !== 'text-only'" [class]="iconClass"></i>
  <span *ngIf="displayType !== 'icon-only'">{{ buttonText }}</span>
</button>

3. 父组件中灵活调用（app.component.html） #

现在你可以在父组件里自由切换按钮的显示模式了：

<!-- 仅文本按钮 -->
<app-button-icon-text 
  displayType="text-only"
  buttonText="仅文本按钮">
</app-button-icon-text>

<!-- 仅图标按钮 -->
<app-button-icon-text 
  displayType="icon-only"
  iconClass="fa-solid fa-heart">
</app-button-icon-text>

<!-- 文本+图标按钮 -->
<app-button-icon-text 
  displayType="text-icon"
  buttonText="提交"
  iconClass="fa-solid fa-paper-plane">
</app-button-icon-text>

4. 可选：添加基础样式（button-icon-text-component.css） #

为了让按钮更美观，你可以加一些基础样式，比如调整图标和文本的间距、按钮的默认样式：

.custom-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px; /* 图标和文本的间距 */
  background-color: #007bff;
  color: white;
}

.custom-button:hover {
  background-color: #0056b3;
}

这样一来，你的按钮组件就完全支持三种显示模式的切换了，而且后续要扩展新模式（比如图标在文本右侧），只需要新增displayType值和对应的模板逻辑就行~

内容的提问来源于stack exchange，提问作者S.A.R.A.