Html 单击按钮时使用输入元素更改标题的字体颜色

我正在练习Angular，我想更改一个名为title的变量的字体颜色，但我无法理解它

请参见下面的tools.component.ts：

所以我想，如果点击用HTML编写的按钮，它会调用setBackground方法，标题的颜色就会改变。tools.component.html如下所示：

<p>Title is {{title}}</p>
<input type="button" value="Set title color" ng-click="setBackground()"/>

<p [style.color]='titleColor'>{{title}}</p>
<button (click)="setBackground()">Set</button>

<input type="button" value="Set title color" ng-click="setBackground()"/>

当然，它现在起作用了。但是，我希望按钮是一个元素，那么如何使用它实现这一点呢？我试着这样做：

<p>Title is {{title}}</p>
<input type="button" value="Set title color" ng-click="setBackground()"/>

<p [style.color]='titleColor'>{{title}}</p>
<button (click)="setBackground()">Set</button>

<input type="button" value="Set title color" ng-click="setBackground()"/>

---

但它不起作用。

我认为你把AngularJS和AngularJS混淆了。ng click不会绑定到Angular中的任何内容。您需要绑定到按钮的单击事件：

最后，你是如何尝试使用标题颜色的？您需要将DOM中项目的颜色绑定到该颜色，然后设置titleColor而不是title.fontColor：

---

在stackblitz上。

按如下方式创建titleColor变量

titleColor = 'red';

setBackground() {
   this.titleColor = 'blue';
}

---

title不是title元素，它只是一个字符串。您在哪里使用titleColor？是的，我指的是在.ts中声明的字符串。不过，看看编辑，因为我知道如何正确使用标题颜色。好吧，对于你的编辑，这是一个完全不同的问题。你原来的问题解决了。你从哪里得到ng click？您是否正在查看AngularJS文档并试图将其用于Angular项目？你能详细说明我希望按钮是一个元素是什么意思吗？按钮是元素。您希望按钮成为元素是什么意思？

this.titleColor = 'blue';
...
<p [style.color]='titleColor'>{{title}}</p>

titleColor = 'red';

setBackground() {
   this.titleColor = 'blue';
}