Day 22：开始来学资料系结：属性系结（一）

今天要来探讨第二种资料系结的方法：属性系结（Property binding）。

我们以上一篇 a 标签的 href 为例，如果要改成属性系结（Property binding），写法会从 href="{{ url }}" 变成 [href]=url。

此时点击网页的 h1 连结，会得到跟前一篇同样的结果（打开 google 首页）。

我们再修改其他地方当成范例，我们先在 img 的标签上，增加一个 title 属性 title="Demo"。

切换到网页，可以看到这个修改呈现的结果。

接着我们改写成 Angular 的 属性系结（Property binding） 语法： [title]="title" ，此时 "title" 是变动的，也就是会受 app.component.ts 里头 title 这个 property 的影响。

我们可以切换到网页来得到验证。

网页呈现的内容，已经从 Demo 变成了 ABow 的追剧生活。

这里我们可以得知，img 标签底下的 title property 跟
AppComponent 底下的 title property 绑定在一起了。

接着再做一个范例，先把 img 里 src 的内容剪下，打开 app.component.ts 并新增一个属性 imgUrl，接着把刚才剪下的内容贴上。

回到 Template 中，把 img 的 src 部分改写成 [src]="imgUrl"，再切换到网页观察，就可以发现 img 的 src 属性跟 AppComponent 中的 imgUrl 属性也绑定在一起了，因此网页中的图片同样可以正常显示。

这就是关於 属性系结（Property binding） 的基本用法，不过这里有个议题是关於 Property 及 Attribute 的区别，我们会在下一篇继续探讨~