Angular 组件如何使用由用户定义的样式表？

Posted 2023-02-23

【中文标题】Angular 组件如何使用由用户定义的样式表？

【英文标题】：Angular components how to use stylesheet defined be the user?

【发布时间】：2020-05-13 23:40:07

【问题描述】：

假设我创建了一个名为 button 的 Angular 组件，并且我希望在他们的应用程序中实现它的用户设置按钮的颜色。除了使用 Input() 装饰器之外，还有其他方法吗？

【问题讨论】：

假设，例如，组件中按钮的颜色由一个变量保存，您可以使用@viewChild获取按钮组件的距离并使用this.button.color = yourColor;（甚至在一个方法）。我不明白为什么@Input 不行。您也可以使用 ng::deep，但它已被弃用。

【参考方案1】：

我唯一的替代方法是使用ng::deep。但请记住，这个功能很快就会变成deprecated！

以下示例说明如何使用它。

app.component.html:

<my-component>
   <another-component>
      <div class="buton"></div>
   </another-component>
</my-component>

my-component.component.scss:

.someclasse ::ng-deep 
     .button 
         background-color: white;
     

【参考方案2】：

@Input 装饰器在这种情况下是最好的，例如。 ：

button.component.html:

<button class="your-custom-buttom" [ngStyle]="backgroundColor: color">Button</button>

button.component.ts:

 @Input() color = 'red'

app.component.html：

<app-button color="green"></app-button>

另外，你可以添加一些特定的类到按钮组件，并告诉用户在styles.scss中改变它：

styles.scss：

.your-custom-buttom 
  background-color: red;

button.component.html:

<button class="your-custom-buttom">button</button>

https://stackblitz.com/edit/angular-dyrn4f?file=src%2Fapp%2Fbutton%2Fbutton%2Fbutton.component.html