Angular的畫面(View)是由typescript（ts檔），template（html檔）及樣式表（css檔）互相搭配來呈現，合起來統稱為Component。
而Angular可在template，也就是html文件中，使用兩個對稱大括弧表示的插值符號(interpolation){{...}}來顯示Component類別的屬性值。
{{...}}插值符中間放的是template expression（範本語法），Angular會執行template expression並將結果賦值於目標屬性，目標可能是HTML元素，Component元件或Directive。
Template expression語法類似JavaScript，但不能使用以下具有副作用(side effect)語法：
- 賦值符(
=、+=、-=...) new、typeof、instanceof等關鍵字。- Chaining expresssions，使用
;或,宣告多個表示式 - 遞增遞減運算子
++、-- - 部分ES2015之後的運算子
其他與JavaScript語法的差異包括：
- 不支援bitwise operators（位元運算子）如
|及&。 - 可使用template expression operators。
下面範例為Angular CLI新建專案的app.component.html及app.component.ts。
app.component.ts中的AppComponent類別掛有@Component裝飾器，因此為Component類別。
@Component的templateUrl值為./app.component.html，所以可以在app.component.html中利用{{title}}來顯示AppComponent的title屬性的內容。
app.component.html
<h1>{{title}}</h1> <!-- 內容來自AppComponent的title屬性 -->
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html', // 綁定template為同目錄下的app.component.html
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demo'; // 在app.component.html文件中 {{title}} 顯示的內容
}
原本AppComponent.title的值為'demo'，若把值修改為其他文字，例如下面修改為'hello world'，存檔後Angular會自動重新整理瀏覽器的畫面，可以看到app.component.html的<h1>{{title}}</h1>由原本的demo變成hello world。
以上就是Angular插值符號{{...}}的作用。
參考：
沒有留言:
張貼留言