本文内容

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

利用 interpolation 展示内容

在 Angular 中，预设 interpolation 的写法为双花括 {{ }} ，中间夹着想要被展示的内容。
假设今天在 app.component.ts 中定义一个属性 title

--- app.component.ts ---
import { Component } from '@angular/core';

@Component({
  // ...
})
export class AppComponent {
  title = 'Jasper';
}

接着，利用 interpolation 将 title 的内容呈现在画面上

--- app.component.html ---
<h2> {{ title }} </h2>

如此，就可以将 Jasper 的内容呈现在画面上罗。

Template expressions - 样板表达式

样板表示式会产出一个值且这个值出现在的位置就是 {{}} 将它包起来的地方。Angular 会将解析出来的结果指定给其系结的元素，这个元素有可能是一个 HTML 元素、元件 ... 等等。

解析样板表示式中的内容

在 interpolation 中我们可以放运算式在里面

<p> 1 plus 1 is {{ 1 + 1 }}</p> // 结果为: 1 plus 1 is 2

另外，也可以在 interpolation 里面摆函式将其结果传入其中

--- app.component.ts ---
getVal() {
  return 2
}

--- app.component.html ---
<p> 1 plus 1 is {{ getVal() }}</p> // 结果为: 1 plus 1 is 2

Note:
Angular 会将双花括中的结果转成字串型别。

Syntax

在 angular 中的样板表达式中，有些 Javascript 具有衍生意义的运算子是不能用的，
像是:

1. =, +=
2. new, typeof

之类的语法是不能在样板表达式中被使用，在官方文件 有说明。

Summary

这边做个总结

1. 可以利用interpolation 双花括 {{ }}，来将元件定义的属性内容呈现到画面上。
2. 在 {{ }} 中，可以放入运算式和函式的。
3. Angular 会自动将双花括的结果转为字串型别
4. 要注意某些具有衍生功能的 Javascript 运算原是不能在 interpolation 中被使用的。