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

我在Angular应用程序中的

login.component.html

上有可重用的组件按钮，带有

login.component.ts

附加按钮名和

标签

和函数

事件

：

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

使用

@Input（）

和

@Output（）

此.onClick.emit（事件）我的btn.component.ts

中使用自己的样式在

我的btn.component.scss

中进行编码

我试图弄清楚，如何从我所在的

login.component.ts

中传递样式元素，如

color

和

icon

，它们具有特定的功能和按钮名称

结果，我试图得到两个功能、颜色、图标和名称不同的按钮，但单个组件的设计相同

my btn.component.scss

---

任何指导或建议都会有帮助

好吧，最好的方法是在

my btn component.SCSS

中定义某些SCSS类，然后将类名传递给组件

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>

---

您好，很抱歉延迟重播。请检查我的编辑，因为我似乎在尝试使用您的代码时做了一些错误的事情