如何实现Angular按钮组件同时支持@Input label与内容作为标签？

你遇到的核心问题是<ng-content>作为内容投影的占位符，不能嵌套任何子内容（比如插值表达式{{label}}），同时内容投影只能被消费一次，重复使用<ng-content>也会导致异常。以下是不需要额外宿主元素的解决方案：

完整组件实现 #

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

@Component({
  selector: 'button[app-button]',
  template: `
    <ng-container *ngIf="label; else projectedContent">
      {{ label }}
    </ng-container>
    <ng-template #projectedContent>
      <ng-content></ng-content>
    </ng-template>
  `,
  styles: [`
    button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background: #1976d2;
      color: white;
      cursor: pointer;
      font-size: 14px;
    }
  `]
})
export class ButtonComponent {
  @Input() label?: string;
}

逻辑说明 #

1. 用*ngIf判断是否传入了label输入属性：
   • 如果label存在，直接渲染插值表达式展示标签文本
   • 如果label不存在，渲染<ng-content>接收父组件投影的内容
2. 使用ng-template包裹<ng-content>，避免重复消费内容投影，同时保证模板结构简洁

验证使用场景 #

你期望的三种使用方式都能正常工作：

<!-- 投影内容作为标签 -->
<button app-button>I am a label</button>
<!-- 字符串字面量传入label -->
<button app-button label="Another label"></button>
<!-- 绑定表达式传入label -->
<button app-button [label]="'Wow a Label'"></button>

为什么原代码失效 #

原代码中试图在<ng-content>内部嵌套{{label}}，违反了Angular内容投影的规则：<ng-content>只能作为占位符，不能包含任何子节点，否则会触发模板解析错误。同时重复使用<ng-content>会导致内容投影被多次消费，无法正常渲染。

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