Angular компоненты, как использовать таблицу стилей, определенную пользователем?

Question

Предполагается, что я создал компонент Angular с именем button, и я хочу, чтобы пользователь, который реализует его в своем приложении, установил цвет кнопки. Есть ли другой способ, кроме использования Input() декораторов?

Answer 1

Единственный альтернативный способ - использовать ng :: deep . Но помните, эта функция скоро станет устаревшей !

Ниже приведен пример ее использования.

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;
     }
}

Answer 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>

Другим способом можно добавить определенный компонент c к компоненту кнопки и указать пользователю изменить его в стилях.s css:

styles.s css:

.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