Angular2: Какой лучший способ передать стиль компоненту?

Question

Итак, у меня есть этот компонент под названием InputEdit (в основном, ярлык, который можно редактировать, когда вы нажимаете на него ... достаточно просто) , и этот компонент имеет свой собственный стиль CSS с теневым стилем. Но, конечно, каждый хостинг-компонент захочет установить свой собственный размер шрифта и цвет для входного компонента ...

так какой будет лучший способ? Можете ли вы просто пройти класс стилизации и применить весь CSS к компоненту? или было бы лучше, чтобы каждое значение вручную, как в:

 <InputEdit [color]="'red'"/> 

, которые, казалось бы, много работы ... но опять же, так как мы используем тень или эмулированный РОМ, мы не можем просто контролировать CSS внешне ...

Я также знаю, что вы можете склеить открыть тень и целевые прямые элементы с помощью:

/* styles.css */ 
UserInfo /deep/ InputEdit label { 
    color: red; 
    font-size: 1.1em; 
} 

, которая в основном позволит вам войти в пользовательский компонент под названием UserInfo/глубокий (любого уровня)/пользовательский компонент InputEdit и целевая метка с красным цветом ...

но опять же, мне интересно, какой лучший подход специально для ng2 ... например, передать конфигурацию класса в директиву?

Спасибо,

Шона

Answer 1

Я бы просто использовать входное свойство styles на InputEdit, и передать объект с нужными стилями:

<InputEdit [styles]="stylesObj">     // in host component's template 

stylesObj = {font-size: '1.1em', color: 'red'}; // in host component class 

<input [ngStyle]="stylesObj" ...>    // in InputEdit component's template 

если у вас есть несколько элементов DOM вы хотите стиль, перейдите в более сложный объект:

<InputEdit [styles]="stylesObj"> 

stylesObj = { 
    input: {font-size: '1.1em', color: 'red'} 
    label: { ... } 
}; 

<label [ngStyle]="styles.label" ...> 
<input [ngStyle]="styles.input" ...> 

Answer 2

/deep/, ::shadow и >>> устарели.

устаревание только для собственной реализации в Chrome (другие браузеры не реализовали его), но Угловой имеет свою собственную эмуляцию этих CSS комбинаторов в ViewEncapsulation.Emulated (по умолчанию)

/deep/, ::shadow и >>> поэтому могут быть использованы просто отлично в Angular2.

Для более простых классов или параметров настройки свойств стиля используют ngStyleAngular 2.0 and ng-style

Answer 3

Mark Rajcok's ответ хорош для группы стилей, но если вы только собираетесь разрешить размер шрифта и цвет, который будет изменен, может потребоваться использовать более прямой подход, как вы начали (в данном примере, а также исполнение только пиксели вместо более гибкой строки для демонстрационных целей):

дЛЯ ИНДИВИДУАЛЬНОГО СТИЛЯ СВОЙСТВА:

Компонент:
<InputEdit [color]="'red'" [fontSize]="16">

Компонент.TS:
Input() color: string = 'black';
Input() fontSize: number = 18;

component.template:
<input type="text" [style.color]="color" [style.fontSize.px]="fontSize">

---

ЕСЛИ Допуская ГРУППА МОД:

Компонент:
<InputEdit [styles]="{backgroundColor: 'blue', 'font-size': '16px'}"> ПРИМЕЧАНИЕ: Убедитесь, что свойства CSS являются camelCased или в строке, если имеется более одного слова.

component.ts:
@Input() styles: any = {};

component.template:
<input type="text" [ngStyle]="styles">