Привязка стиля с использованием «стиля». синтаксис к дочерним элементам в Angular

Question

Возможно ли применить любой стиль к дочерним компонентам, используя синтаксис style. в Angular (я использую Angular 8). Например:

<div class="col-8 kt-padding-l-10" [style.fill]="visitor | vcolor">
    <div>{{ visitor?.id?.substr(0,6) }}</div>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
                <rect x="0" y="0" width="24" height="24"/>
                <path d="M21,12.0829584 C20.6747915,12.0283988 20.3407122,12 20,12 C16.6862915,12 14,14.6862915 14,18 C14,18.3407122 14.0283988,18.6747915 14.0829584,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,8 C3,6.8954305 3.8954305,6 5,6 L19,6 C20.1045695,6 21,6.8954305 21,8 L21,12.0829584 Z M18.1444251,7.83964668 L12,11.1481833 L5.85557487,7.83964668 C5.4908718,7.6432681 5.03602525,7.77972206 4.83964668,8.14442513 C4.6432681,8.5091282 4.77972206,8.96397475 5.14442513,9.16035332 L11.6444251,12.6603533 C11.8664074,12.7798822 12.1335926,12.7798822 12.3555749,12.6603533 L18.8555749,9.16035332 C19.2202779,8.96397475 19.3567319,8.5091282 19.1603533,8.14442513 C18.9639747,7.77972206 18.5091282,7.6432681 18.1444251,7.83964668 Z" fill="#00000" />
                <circle fill="#00000" opacity="0.3" cx="19.5" cy="17.5" r="2.5"/>
            </g>
        </svg>
        yehia@salam.com
</div>

Мне нужно стилизовать все элементы, которые имеют атрибут fill в элементе g, если бы я делал в чистом css, это было бы:

g [fill]{
   fill: red; /* or in my case the visitor variable with the vcolor pipe */
}

Похоже, я не могу этого сделать, но, хотя для двойной проверки, другое решение заключается в добавлении [style.fill]="visitor | vcolor" для каждого компонента, такого как circle и path, но это очень избыточно. Какие у меня варианты? Создание отдельного компонента также будет последним средством.

Answer 1

Вы должны использовать :ng-deep, чтобы проколоть стили дочернего компонента и применить их, так что в scss этого компонента попробуйте добавить это вверху:

:host { // host to say for this component
  &::ng-deep {
    g[fill] {
      fill: red;
    }
  }
}

Вам может понадобиться еще один ::ng-deep но это определенно должно начать вас.