文章内容

本章内容为阅读官方文件有关 interpolation 的笔记内容。

Expression context

一般状况，interpolation 都会用来呈现某个元件它自己拥有的成员属性，像下面这样，假若 app.component 拥有一个叫做 title 的成员属性，我们利用 interpolation 将它呈现在画面上

@Component({
  // ...
})
export class BannerComponent implements OnInit {
  title = 'Jasper'
}

<h2> {{ title }} </h2>  // 呈现 Jasper 内容

interpolation 除了上面这种用法以外，还可以用来呈现某个样板内容的属性，这个样板内容有可以是 template input variable 的属性或者是一个 template reference variable 的属性。

template input variable 的属性

下面的范例就是利用 interpolation 来呈现 template input variable 的属性。

<ul>
  <li *ngFor="let customer of customers"> {{ customer.name }}</li>
</ul>

像上面的范例，customer 就是我们的 template ，假若今天它有一个 name 属性，如此，我们就可以透过 interpolation 在里面使用物件调用它的属性的方式 customer.name，如此一来，就可以呈现它的属性内容罗。

template reference variable 的属性

<label>Type something:
  <input #customerInput>{{customerInput.value}}
</label>

上面的范例，我们宣告一个 #customerInput 可以取得这个 input 栏位。接着，再透过 interpolation 来呈现此 input 栏位的 value 内容。

防止名称命名上的冲突

当有多个区域的变数名称有冲突，则 Angular 会以以下的逻辑来区别它们

1. 样板变数的名称
2. 在 directive 中的名称
3. 元件的成员属性的名称

这边举个样板变数和元件的成员属性名称彼此冲突的状况

<h1> {{ customer }} </h1>
<ul>
  <li *ngFor="let customer of customers"> {{ customer.name }}</li>
</ul>

class AppComponent {
  customers = [{name: 'Tiffany'}, {name: 'Jared'}];
  customer = 'Jasper';
}

上面的例子中，在 *ngFor 中的 customer 就是属於样板变数的情况，依据上面列出的 Angular 区别出它的逻辑所以，这边的内容会呈现 Tiffany 和 Jared 而不会是 Jasper。而在 h1 中的 customer 是属於元件的成员属性，所以，Angular 可以区别出它是从哪里来。所以，以上的变数名称酸然有冲突，但 Angular 还是能依照他的判断逻辑来区分出它们是属於哪个区域的变数，而不会发生冲突错误。

Summary

这边做个总结

1. interpolation 中，可以使用像是 template input variable 或是 template refernce variable 这种变数的属性，来将其内容呈现在画面上。
2. Angular 会依照它辨识该变数在哪里被定义来呈现它的内容，不会因为在同一篇内容的上下文中有相同的变数而马上就抱错，但是!! 这样的习惯是不被建议的，还是建议变数都只有专属於它的变数名称，这样才不容易被搞混，也比较好除错。