css 为什么绑定到文本元素颜色的属性在Angular 上不起作用？

cbwuti44 于 2023-01-10 发布在 Angular

关注(0)|答案(1)|浏览(127)

下面是我的.ts文件，

import { Component } from '@angular/core';

@Component({
  selector: 'app-event-binding',
  templateUrl: './event-binding.component.html',
  styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent {

  textColor = '';
  onInput = (ev: any) => {
    this.textColor = ev.target.value;
  }
}

下面是我的HTML模板，

<div>
    <h3 [style.color]="textColor">EVENT BINDING</h3>
    <input type="text" (input)="onInput($event)">
</div>

这里当我在输入框中完全输入“blue”时，h3的文本颜色变为蓝色。但是我注意到**当我按退格键时，现在textColor的值为“blu”，文本仍然保持蓝色。我希望返回黑色。**只有当我清除整个输入时，它才变为黑色。那么在html中，颜色中是否保留了某种历史？这是什么？

css

来源：https://stackoverflow.com/questions/75058000/why-property-binding-to-the-color-of-a-text-element-is-not-reactive-in-angular

1条答案

按热度按时间

nx7onnlm1#

用纯JavaScript操作DOM时也会发生同样的情况，我为您准备了一个示例：

document.querySelector('input').addEventListener('input', event => {
  document.querySelector('h3').style.color = event.target.value;
})

<h3>EVENT BINDING</h3>
<input type="text">

当试图设置一个浏览器认为无效的值时，操作不会执行。你可以在DOM中看到内联样式的值没有更新。在这种情况下，将使用最后一个 * valid * 值。在这里，Angular的工作原理与普通JavaScript相同。
作为一种解决方法，您可以使用CSS.supports()检查输入的值是否有效，然后恢复为黑色：

onInput = (ev: any) => {
  const value = ev.target.value;
  this.textColor = CSS.supports('color', value) ? value : 'black';
}

赞(0）回复(0）举报 2023-01-10

我来回答

css 为什么绑定到文本元素颜色的属性在Angular 上不起作用？

1条答案

相关问题

热门标签

最新问答