1. 程式人生 > >Angular09 數據綁定、響應式編程、管道

Angular09 數據綁定、響應式編程、管道

blog 變化 width png control 通過 單向 angular css

1 數據綁定的分類

  1.1 單向數據綁定

    1.1.1 屬性綁定 -> 數據從組件控制類到組件模板

      DOM屬性綁定

      HTML屬性綁定

    1.1.2 事件綁定 -> 數據從組件模板到組件控制類

  1.2 雙向數據綁定

    組件模板和控制類的數據可以雙向流通

2 屬性綁定

  請參見《揭秘angular2》 P162

  2.1 DOM屬性綁定

技術分享

  2.2 HTML屬性綁定

    技術分享

    2.2.1 普通HTML屬性綁定

    2.2.2 CSS類綁定

    2.2.3 Style樣式綁定

3 事件綁定

  請參見《揭秘angular2》 P165

  技術分享

4 雙向綁定

  請參見《揭秘angular2》 P168

5 響應式編程

  每個表單元素都對應一個FormController對象,當表單元素的值發生變化時對應的FormController對象就會發送一個valueChange事件,該事件會將表單元素的值編程一個流(即:可觀察對象),我們通過訂閱這個流來獲取這個值,然後根據這個值進行一些處理

  在模板中通過DOM屬性綁定的方式將表單元素和對應的FormController對象綁定在一起

  技術分享

  技術分享

6 管道

  請參見《揭秘angular2》 P188

  6.1 創建自定義管道

    ng g pipe 管道名稱

    技術分享

  6.2 使用自定義管道

    技術分享

  

Angular09 數據綁定、響應式編程、管道