Day 21：开始来学资料系结：文字插值

在连续开了几天支线任务之後，我们将再次回到 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) 的介绍~