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

debugcn 发表于 Dev

Andreivictor

在我的Angular 11 App中，我实现了一个自定义按钮组件。对于样式，我使用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财产。

在模板中使用的示例：

 <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

yinnping

这是示例代码，可以帮助您实现所需的操作：https : //stackblitz.com/edit/angular-ivy-xymefd?file=src%2Fapp%2Fbutton%2Fbutton.component.ts

我从您的代码中更改的是：

添加ButtonIconDirective到AppModule声明。
使用appButtonIcon代替docsButtonIcon。
注入ElementRef到ButtonIconDirective。（我们将在中使用ElementRef ButtonComponent）。
将模板变量附加到<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);
  }
}