在我的Angular 11应用程序中，我实现了一个自定义按钮组件。对于样式，我使用TailwindCSS和TailwindUI。
按钮可以有多种颜色(red、blue、gray等(，也可以有不同的尺寸(xs、sm、md、lg、xl(。
我想为这些按钮创建一个变体：一个带有前导图标的按钮，如下所示：https://tailwindui.com/components/application-ui/elements/buttons#component-8a4b7248253和4c9ee892c655d7ff5ec。
对于图标，我使用以下库：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；以及CCD_ 18性质。
模板中的使用示例：
<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获得它，但我无法向其中添加类。
谢谢！
Stacklitz示例：https://stackblitz.com/edit/angular-ivy-6gpcby?file=src%2Fapp%2Fbutton%2Fbutton.component.ts
这是一个示例代码，可以帮助您实现您想要做的事情：https://stackblitz.com/edit/angular-ivy-xymefd?file=src%2Fapp%2Fbutton%2Fbutton.component.ts
我从你的代码中更改的是：
- 将
ButtonIconDirective添加到AppModule声明中 - 使用
appButtonIcon而不是docsButtonIcon - 将
ElementRef注入ButtonIconDirective。(我们将在ButtonComponent中使用ElementRef( - 在
<bookmark-solid-icon>上附加一个模板变量以获取其组件实例 - 在
ButtonComponent方法中重写ngAfterContentInit以更新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);
}
}