Angular点击切换文本颜色问题：用户输入颜色无法生效

嘿，我来帮你搞定这个Angular里动态设置文本颜色的问题～

首先咱们先理清问题出在哪：你原来在<p>标签里用插值表达式嵌套在style属性里的写法，不符合Angular的模板绑定规则，所以要么报错要么不生效。接下来咱们一步步修正代码：

第一步：修正TypeScript的方法 #

你模板里的inputColor是模板引用变量，指向的是<input>元素本身，不是输入的字符串值。所以你的changeColorText方法需要接收HTMLInputElement类型的参数，然后获取它的value：

export class HelloWorld implements OnInit {
  public inputColor: string;

  constructor() { }

  ngOnInit(): void { }

  public changeColorText(inputElement: HTMLInputElement): void {
    // 获取输入框的实际值
    this.inputColor = inputElement.value;
  }
}

第二步：正确绑定段落颜色 #

有两种靠谱的写法可以实现动态绑定，选哪种都可以：

写法1：使用Angular样式属性绑定 #

这是Angular推荐的单一样式属性绑定方式，语法是[style.属性名]="变量"：

<p [style.color]="inputColor">Hello World !</p>

写法2：使用NgStyle指令 #

如果之后需要同时绑定多个样式属性，用NgStyle会更方便，单属性也完全适用：

<p [ngStyle]="{ color: inputColor }">Hello World !</p>

为什么原来的写法不行？ #

• 第一种<p style="color:{{inputColor}}">：Angular不允许在HTML属性值里直接嵌套插值表达式，这种写法会触发模板解析错误，因为Angular无法正确识别这种混合语法。
• 第二种<p style=color:{{inputColor}}>：这里的反引号是原生JavaScript的模板字符串语法，但在Angular模板中不会被解析，浏览器最终拿到的style值是color:{{inputColor}}，这不是有效的颜色值，所以文本颜色不会变化。

内容的提问来源于stack exchange，提问作者Pluto