在連續開了幾天支線任務之後，我們將再次回到 Angular 開發的正軌，繼續我們第十六天之後的網頁開發主線，如果已經有忘記的朋友，附上主線任務的連結如下，幫助大家重拾記憶。

Day 16：把做好的 HTML 加入 Angular 吧！

我們今天要開始來探討 Angular 裡資料繫結的方法，總共有四種，如下所示：

• 文字插值(Text interpolation)
• 屬性繫結(Property binding)
• 事件繫結(Event binding)
• 雙向繫結(Two-way binding)

而今天，我們會按照順序，從最簡單的文字插值開始談起。

在 Day 16 時，我們已經把 app.component.html 換成 drama-blog.html 的內容。

但是我們還沒寫到任何的程式，所以我們現在要把網頁的標題 ABow 的追劇生活 透過 文字插值(Text interpolation) 來做更改，所以我們要先打開 app.component.ts 這個檔案，並且在下圖所標示的區塊增加屬性 title = 'Title Test'。

然後，我們在 app.component.ts 按下鍵盤 alt + O 打開 Template，也就是 app.component.html 這個檔案，找到內容為 ABow 的追劇生活 的位置。

把內容從 ABow 的追劇生活 替換成 {{ title }}。

{{ }} 裡頭加上屬性名稱，就是文字插值(Text interpolation)的語法。

存檔後，打開網頁，就會看到標題已被更換。

而**文字插值(Text interpolation)**除了可以用在標籤裡面，也可以放到標籤的屬性裡，如：a 標籤的 href 中。

我們先開啟 app.component.ts 並增加一個屬性 url = 'https://www.google.com.tw/'。

再回到 app.component.html，將原本 href 屬性裡的內容從 # 改成 {{ url }}。

接著到網頁上點擊標題，就可以連到我們所設定的網址了。

以上就是關於文字插值(Text interpolation) 的介紹~