網頁

▼

2019/5/25

Angular 使用插值符號(interpolation)來顯示Component的屬性資料

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語法的差異包括：



下面範例為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插值符號{{...}}的作用。


參考：

沒有留言:

張貼留言