将颜色样式和设计元素附加到 Angular 个可重用组件

Question

我在 login.component.html 上的 Angular 应用程序中有可重复使用的组件按钮 login.component.ts 附加按钮名称 label 和功能 event:

<app-my-btn (onClick)="myFunction($event)" [label]="label"></app-my-btn>

在 @Input() 和 @Output() this.onClick.emit(event); 在 my-btn.component.ts 在 my-btn.component.scss.

有自己的风格

我正在尝试弄清楚如何从 login.component.ts 传递 color 和 icon 等样式元素，其中我具有特定的功能和按钮名称。

结果我试图从单个组件中获得两个功能、颜色、图标和名称不同但设计相同的按钮 my-btn.component.scss

任何指南或建议都会有所帮助

Answer 1

嗯，最好的方法是在 my-btn-component.scss 中定义某些 SCSS classes，然后将 class 名称传递给组件。

TS

// when an input arrives, the class gets replaced and the HTML immediately updates
@Input() currentClass: string = "default-style";

HTML

<app-my-btn (onClick)="myFunction($event)" [label]="label" [class]="currentClass"></app-my-btn>