我想做一個(gè)<input>文本框，在這里你寫(xiě)一個(gè)特定的顏色，比如說(shuō)'red'，然后一個(gè)特定的文本會(huì)像那樣被著色。我找到了一些指導(dǎo)方法，但是代碼是用JavaScript編寫(xiě)的，而不是TypeScript。到目前為止我得到了這個(gè)：
HTML
<input id="color" />
<h1>Change the color</h1>
CSS
<style>
h1 {
color: var(--color, blue)
}
</style>
JavaScript
const color = document.querySelector('#color');
color.addEventListener('input', e => {
document.documentElement.style.setProperty('--color', color.value)
})
當(dāng)我使用.ts類時(shí)，我想知道如何編寫(xiě)上面的JavaScript？
為了實(shí)現(xiàn)這一點(diǎn)，您應(yīng)該讀取輸入的值（讓我們通過(guò)
[(ngModel)]指令使用two-way綁定），然后使用這個(gè)值作為樣式規(guī)則應(yīng)用（[style.color]非常適合這個(gè)）。最后，您應(yīng)該只需要幾行代碼：HTML:
TS:
這是一場(chǎng)閃電戰(zhàn)。
例如，我還在CSS中定義了一個(gè)默認(rèn)的藍(lán)色。這是一種默認(rèn)顏色，因?yàn)樵谶@種情況下，通過(guò)
style屬性定義的樣式規(guī)則具有更高的優(yōu)先級(jí)。UPDATE
如果要控制應(yīng)用程序上所有元素的顏色，可以通過(guò)以下方式使用top-level組件中的
@HostBinding('style')：這是一場(chǎng)閃電戰(zhàn)。