網頁

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)語法:

  • 賦值符(=+=-=...)
  • newtypeofinstanceof等關鍵字。
  • Chaining expresssions,使用;,宣告多個表示式
  • 遞增遞減運算子++--
  • 部分ES2015之後的運算子

其他與JavaScript語法的差異包括:



下面範例為Angular CLI新建專案app.component.htmlapp.component.ts


app.component.ts中的AppComponent類別掛有@Component裝飾器,因此為Component類別。

@ComponenttemplateUrl值為./app.component.html,所以可以在app.component.html中利用{{title}}來顯示AppComponenttitle屬性的內容。

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插值符號{{...}}的作用。


參考:

沒有留言:

張貼留言