javascript - Angular 11 - 将不同样式的图标添加到自定义按钮组件

Question

在我的 Angular 11 应用程序中，我实现了一个自定义按钮组件。
对于样式，我使用 TailwindCSS 和 TailwindUI。
按钮可以有多种颜色(red、blue、gray 等)以及不同的尺寸(xs、sm、md、lg、xl)。
我想为这些按钮创建一个变体:一个带有前导图标的按钮，如下所示:
https://tailwindui.com/components/application-ui/elements/buttons#component-8a4b7248253ad4c9ee892c655d7ff5ec .
对于图标，我使用以下库:
https://ng-heroicons.dimaslz.dev/
图标是一个组件，例如:<mail-solid-icon></mail-solid-icon> , <bookmark-solid-icon></bookmark-solid-icon>等等
由于按钮的大小不同( xs 、 sm 、 md 、 lg 、 xl )，我需要为图标添加自定义 Tailwind 类。例如:

<app-button [size]="'xs'">
  <mail-solid-iconclass="-ml-0.5 mr-2" [size]="16"></mail-solid-icon>
  Button text
</app-button>

<app-button [size]="'xl'">
  <bookmark-solid-icon class="-ml-1 mr-3 h-5 w-5" [size]="20"></bookmark-solid-icon>
Button text

期望的结果:
我希望能够只提供图标组件，然后在按钮的组件类中添加类 -ml-0.5 mr-2 , 或 -ml-1 mr-3 h-5 w-5 ;以及 size属性(property)。
模板中的使用示例:

 <app-button [size]="'xl'">
  <bookmark-solid-icon></bookmark-solid-icon>
   Button text
 </app-button>

输出:

<app-button [size]="'xl'">
  <bookmark-solid-icon class="-ml-1 mr-3 h-5 w-5" [size]="20"></bookmark-solid-icon>
   Button text
 </app-button>

我尝试使用自定义指令并使用 @ContentChild 获取它，但我无法向其中添加类。
谢谢!
Stackblitz 示例:
https://stackblitz.com/edit/angular-ivy-6gpcby?file=src%2Fapp%2Fbutton%2Fbutton.component.ts

Answer 1

这是可以帮助您实现您想要做的示例代码:https://stackblitz.com/edit/angular-ivy-xymefd?file=src%2Fapp%2Fbutton%2Fbutton.component.ts
我对您的代码所做的更改是:

添加 ButtonIconDirective到 AppModule 声明。

使用appButtonIcon而不是 docsButtonIcon .

注入(inject) ElementRef进入 ButtonIconDirective . (我们将在 ButtonComponent 中使用 ElementRef)。

将模板变量附加到 <bookmark-solid-icon>获取其组件实例。

重写 ngAfterContentInit在 ButtonComponent更新方法size并在运行时添加新的 CSS 类:

public ngAfterContentInit(): void {
  console.log( 'this.icon: ', !!this.icon);
  
  if (this.icon) {

    // reference to ng-heroicons component source code
    this.icon.style = '';
    this.icon.size = 50;     
    this.icon.renderStyle(); 

    this.renderer.addClass(this.iconi.er.nativeElement, '-ml-1');
    this.renderer.addClass(this.iconi.er.nativeElement, 'mr-3');
    this.renderer.addClass(this.iconi.er.nativeElement, 'h-5');
    this.renderer.addClass(this.iconi.er.nativeElement, 'w-5');      

    console.log(this.icon.style);
  }
}