Тот же компонент, разные стили

Question

Какова наилучшая практика для настройки и запуска одного компонента и использования его с разными стилями в разных местах? (динамические стили?)

Answer 1

У вас может быть styleUrls/styles опции внутри вас Компонентные метаданные, которые вы будете использовать, когда этот компонент будет отображаться на виду. Было бы хорошо, если вы используете ViewEncasulation как Emulated/Native (будет тень DOM).

Я рекомендовал бы читать на this great article

Answer 2

Переключение между различными стилями с помощью: хост-контекст()

коммутатора, применяя различные (предопределенные классы или атрибуты)

:host-context(.class1) { 
    background-color: red; 
} 

:host-context(.class2) { 
    background-color: blue; 
} 

<my-comp class="class1></my-comp> <!-- should be red --> 
<my-comp class="class2></my-comp> <!-- should be blue --> 

Использовать глобальные стили

* /deep/ my-comp.class1 { 
    background-color: red; 
} 

// or to style something inside the component 
* /deep/ my-comp.class1 /*deep*/ div { 
    border: solid 3px yellow; 
} 

* /deep/ my-comp.class2 { 
    background-color: blue; 
} 

Использование хост-связывающим

@Component({ 
    selector: 'my-comp', 
    host: {'[style.background-color]':'backgroundColor'} 
}) 
class MyComponent { 
    @Input() backgroundColor:string; 
} 

<my-comp background-color="red"></my-comp> 
<my-comp background-color="red"></my-comp> 

Смотрите также https://stackoverflow.com/a/36503655/217408 для интересной "взломать".

Answer 3

Согласно мне, лучшей практикой будет контроль стилей посредством свойств (атрибутов) компонента.