叡揚資訊

GSS 技術部落格

在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗，希望大家不管是喜歡或是有意見，都可以回饋給我們，讓我們有機會和大家對話並一起成長！
若有任何問題請來信：gss_crm@gss.com.tw

3 分鐘閱讀時間 (656 個字)

字體大小: + –

Angular #12 - 深入淺出 Angular [4]

程式語言前端

2021/07/01, 週四

1141 點擊

0 評論

差不多快結束深入淺出的部份了，大家再撐一下
Template
- 讓我們先回到 template 的幾個概念上來複習一下:
  - 插入(Interpolation) - 顯示資料
  - 屬性綁定(Attribute/Property Binding) - 主要針對某個 HTML element 的 attribute 或是 DOM property 綁定
  - 事件綁定(Event Binding) - 在 HTML element 上加上事件監聽
  - Directives - 針對 HTML element 作行為或結構上的異動
  - Pipes - 更改資料的輸出格式
- 在 Template 中會看到不少的 Template expression
  - 它其實就是 javascript 寫在 view 上並以雙花括號包住，但有幾個差異:
    - 它們不在 global 的範圍，所以 console 或是 window 無法直接存取
    - 它們不能用來賦予變數值(除了事件中)
    - 它們不能使用 ++, --, |, &...等
    - 它們可以使用 Elvis operator(?.)，在 null 的時候什麼也不顯示
  - Template Expression 常用在三個地方:
    - Interoplation
      - 這個是最常用的一種 Template Expression
      - 它會依綁定的 model 顯示其資料內容
      - 語法 {{ value }}，比方說:
        
        {{ 10 + 20 }} => 顯示 30
        
        {{ 'Just a simple string' }} => 顯示字串(留意單引號)
        
        <a href ="/users/{{user.userId}}">View profile</a>" => 解析出 url 的一部份，但要特別留意特殊字元
        
        {{ getName() }} => 從 controller 方法回傳的結果顯示在畫面上，但這個方法必須回傳字串型態的值
    - Property binding
      - 針對元素的 property 作綁定，在這強調是 property 不是 attribute (可以透過開發者工具看到該元素是否有此 property)
      - 語法 => 將 property 以 [] 包住
      - 範例:
        <img [src]="user.img" /> <p [textContent]="user.name"></p>
      - 自定屬性綁定(透過@Input())
      - 特殊屬性的綁定
        
        class/style
        
        [class.active]="isActive()"
        
        [style.color]="getColor()"
        
        以上都是針對某個 class 或是 style 的屬性綁定，而非移掉整個 class 或 style，但如果你有很多 class/style 要用，還是建議用 NgClass/NgStyle
        
        Attributes binding
        
        有些屬性不存在 DOM 中, 像是 aria，以下面的 HTML 為例:
        <input id="username" type="text" aria-required="true" />
        
        這樣的屬性是要用特殊語法綁定的, [attr.aria-required]="isRequired()" => attr. + 屬性名稱
        
        如果你用了 aria-required="{{isRequired()}}" 或 [aria-required]="isRequired()", 編譯是不會過的，因為前者是 Interpolation，後者是 property binding，但實際上並沒有 aria-required 這個 property
    - Event binding
      - Javascript 本身就有很多內建的事件, 像是 click, mousemove, form submit...etc.
      - 資料是從 template 流向 controller
        
        語法是把事件名稱以括號包住
        <form (submit)="save()">...</form>
        
        submit 事件用括號括住了
        
        controller 中的方法 save() 會在表單送出時被觸發
      - 可以綁定自定的事件(後面的篇章會提到)
小結
- 深入淺出的部份結束了(灑花)
  - 接下來的部份就會是深入探討了！