如何在Angular 5中的子组件的输入字段上应用条件css？-Java 学习之路

我遇到了一些问题，试图根据布尔条件动态设置子组件的自动完成字段的背景颜色 .

在我的父组件中，我有一个包含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 回答

试试吧：

search.error-color ::ng-deep  input {
  background-color: rgba(255, 255, 0, 0.48);
}

或者组件中没有封装样式

@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
  // ...
]
})

回复于 2024-04-27T17:15:36+08:00

0
你可以使用属性绑定 - @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 }
```
回复于 2024-04-27T17:15:36+08:00

如何在Angular 5中的子组件的输入字段上应用条件css？

2 回答

相关问题