Передача стилей CSS дочерним элементам HTML с помощью директив атрибута - PullRequest
Новая
       53

Передача стилей CSS дочерним элементам HTML с помощью директив атрибута

0 голосов
/ 27 февраля 2019

Я пытаюсь отправить список стилей дочерним компонентам через директивы атрибутов.Например: 

<div [mystyles]>
   <p>.....</p>
   <div>...</div>
</div>

С помощью директив атрибута я могу изменить css родительского div, который я использую. Но я хочу, чтобы [mystyles] изменил свои дочерние элементы p и div.

1 Ответ

0 голосов
/ 27 февраля 2019

Вы можете использовать директиву ngStyle в дочернем компоненте.

В вашем родительском компоненте вы можете передать (через директиву @input) стиль, который вы хотите, своему дочернему компоненту, тогда дочерний компонент может использовать его внутри html..

Вот пример реализации.

Parent.ts 

myStyles = {
   'background-color': 'blue',
}

Parent.html 

<child-component-selector [parentStyle] = myStyles>

Child.ts 

@Input() parentStyle: any;

Child.html 

<p [ngStyle]="parentStyle">
   ...
</p>

Здесь маленький путеводительо том, как использовать ngStyle

Редактировать:

Вы можете составить в родительской переменной myClasses, которая заменит myStyles следующим образом: 

myClasses = {
  "class-name-1": {
    "background-color": "blue"
  },
  "class-name-2": {
    "background-color": "yellow"
  },
  "class-name-3": {
    "background-color": "lime"
  }
}

И затем использовать классы в childэлемент следующим образом: 

<p [ngStyle]="parentStyle.class-name-1">
   ...
</p>
<div [ngStyle]="parentStyle.class-name-2">
   ...
</div>

(parentStyle var имеет имя, которое вы указываете после директивы @Input (), как в предыдущем примере)

Как видите, необходим только один вводдля передачи нескольких классов зависит только от входной переменной, которую вы передаете дочернему элементу.

...