Как применить условный CSS к полю ввода дочернего компонента в Angular 5?
Я столкнулся с проблемами, пытаясь динамически изменить цвет фона поля автозаполнения дочернего компонента на основе логического условия.
В моем родительском компоненте у меня есть компонент поиска, который содержит поле автозаполнения Angular Material:
<search (notify) = "onSearch($event, i)" searchType = "Product"
[(value)] = "repair.product"
[ngClass] = "{'error-color': repair.invalidProduct}"></search>
И в scss моего родительского компонента у меня есть этот класс:
:host ::ng-deep search.input .error-color {
background-color: rgba(255, 255, 0, 0.48);
}
Есть ли способ сделать это?
Правильно, это мой пользовательский компонент
так почему бы не использовать привязку свойств и не передать логическое значение, которое будет использоваться ВНУТРИ компонента?
Ответы 2
вы можете передать логическое значение от родительского компонента дочернему компоненту с помощью привязки свойств - @input () и использовать его внутри дочернего компонента.
так что у вашего родителя:
<search [isInvalid] = "repair.invalidProduct"></search>
и внутри дочернего компонента (поиск):
search.component.TS:
@Input() isInvalid = false;
search.component.HTML:
<input [ngClass] = "{'error-color': isInvalid}" />
search.component.CSS:
.error-color { background-color: red }
Попытайся:
search.error-color ::ng-deep input {
background-color: rgba(255, 255, 0, 0.48);
}
Или нет стилей инкапсуляции в компоненте
@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
// ...
]
})
Спасибо, это оказалось тем решением, которое я искал.
что это за
<search></search>твой компонент?