时间戳

首页 > 解决方案 > angular 2+ - 在多个焦点输入元素上设置类或样式

angular - angular 2+ - 在多个焦点输入元素上设置类或样式

问题描述

当输入焦点时，我去设置更多输入元素上的类或样式。

例如，如果只有一个输入元素：

<span [ngClass]=["control"? "classA":"classB"]>
    <input type="text" (foucs)="control=true" [ngClass]=["control"? "classC":"classD"]>
</span>

当输入元素越多时，需要更多的control参数：

<span [ngClass]=["control_1"? "classA":"classB"]>
    <input type="text" (foucs)="control=true" [ngClass]=["control_1"? "classC":"classD"]>
</span>
<span [ngClass]=["control_2"? "classA":"classB"]>
    <input type="text" (foucs)="control=true" [ngClass]=["control_2"? "classC":"classD"]>
</span>
.
.
.

有任何方法可以做到这一点，更多输入元素的参数，例如(focus)返回this元素时。

标签： angular

解决方案

因此，要完全按照您的要求实现，您将执行以下操作：

<span [ngClass]="{ 'classA': control, 'classB': !control }">
    <input type="text" (focus)="control=true" (blur)="control=false" [ngClass]="{ 'classC': control, 'classD': !control }">
</span>

密切注意如何插入类属性（引号与不引号）

此外，您在拼写和指令的一般使用方面有很多错误。您很可能需要访问文档。

推荐阅读