[Angular學習紀錄] @Input() or | angular output範例
Angular可以透過在HTML標籤內使用DOM的Property綁定的方式將資料由Component端傳送到Template端(又或者反向綁定、雙向綁定)。但該方式指的都是同一個Template,若假設有一種情境為,一個父親的Template必須要將值傳送到兒子Template,並且兒子Template內處理完某些事件必須要將資料傳送回父親Template的情境時,該如何進行?PS.有點類似早期的showModalDialog在兩個父子視窗傳值的概念,只是在此SinglePageApplication(SPA)的情境中不是兩個不同的頁面,因此使用方式也有所不同。首先必須要先理解Angular在屬性綁定的對應關係,舉個...
Angular可以透過在HTML標籤內使用DOM的Property綁定的方式將資料由Component端傳送到Template端(又或者反向綁定、雙向綁定)。但該方式指的都是同一個Template,若假設有一種情境為,一個父親的Template必須要將值傳送到兒子Template,並且兒子Template內處理完某些事件必須要將資料傳送回父親Template的情境時,該如何進行?
PS. 有點類似早期的showModalDialog在兩個父子視窗傳值的概念,只是在此Single Page Application(SPA)的情境中不是兩個不同的頁面,因此使用方式也有所不同。
首先必須要先理解Angular在屬性綁定的對應關係,舉個例子[value] = "hero.name"。上面這個表達式的關係可參考底下Angular的官方說明,說的很清楚,若你不想要逐一看官網的敘述的話,容我用白話文簡短的來翻譯一下,上面的表達式以等號當作切點來看,大致如下三點說明。
等號的左邊為綁定的目標。 等號的右邊為綁定的來源。 在某些條件下,目標會受到限制,只能綁定到標記為Input和Output的屬性,例如,綁定到兒子Template的目標(這個就是本文要說明的部分)。Note the important distinction between a data binding target and a data binding source
The target of a binding is to the left of the =. The source is on the right of the =.
The target of a binding is the property or event inside the binding punctuation: [], () or [()]. The source is either inside quotes (" ") or within an interpolation ({{}}).
Every member of a source directive is automatically available for binding...