如何将 @input 标签道具或内容作为标签传递给角度按钮组件？答案

【问题标题】：how to pass either a @input label prop or the content as label to a angular button component?如何将 @input 标签道具或内容作为标签传递给角度按钮组件？
【发布时间】：2023-01-27 20:25:17
【问题描述】：

我正在尝试使用可以作为 @Input() 或按钮内容出现在组件中的标签：

@Component({
  selector: 'button[app-button]',
  template: `
  <ng-container *ngIf="label">
    <ng-content>{{label}}</ng-content>
  </ng-container>
  <ng-container *ngIf="!label">
    <ng-content></ng-content>
  </ng-container>
  `,
})

问题是以上确实有效，因为 ng-content 不能有内容。任何想法如何在不将按钮包装在另一个宿主元素中的情况下解决这个问题？

【问题讨论】：

为什么在第一种情况下需要ng-content？你不能只使用div吗？

标签： angular

【解决方案1】：

这是你想要的吗？？

@Component({
  selector: 'button[app-button]',
  template: `
  <ng-container *ngIf="label">
      {{label}
  </ng-container>
  <ng-container *ngIf="!label">
    <ng-content></ng-content>
  </ng-container>
  `,
})

【讨论】：