Angular数据绑定（1）-内嵌绑定

数据绑定

在Angular当中，绑定的种类分为两类，一种是单向另一种则是双向绑定。

单向绑定

单向绑定包含了内嵌绑定（Interpolation）、事件绑定（Event Binding）、属性绑定（Property Binding / Attribute Binding）、样式绑定（Style Binding）与类别绑定（Class Binding），而本文要介绍的就是属于内嵌绑定。

双向绑定

而双向绑定则是透过语法糖[（ngModel）]来达成。

另外，原先安排将会一次介绍完所有的绑定方法，但我看了很多次之后仍然无法完全理解每个绑定的方法，所以将依照不同的绑定方法逐一写成文章介绍。

内嵌绑定（Interpolation）

内嵌绑定就只是将数据绑定在html标签上，以下直接示例：

app.component.html

<h1>{{ title }}</h1>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 逍遥乐';
}

执行ng serve可以看到compoment里面定义的title变量被渲染到html上面了。