[Day 19] Angular 2 Input(s) & Output(s) 傻傻分不清 | angular output範例
前言Angular2中Components之間的關係示意層一層的,就長得向下面這張圖。每個格子就是一個組件,資訊向下傳遞很容易,而為了維護資料傳遞的單一性,向上傳遞需要觸發事件(event)。所以現在當childcomponent需要被parents知道的時候,child會被parents觸發事件。parentcomponent會採取任何可能的行為來串聯他底下的組件,通常就是單方向往下資訊傳遞。藉由區隔向上和向下的資料傳遞,事情就變得比較簡單和比較好管理。@Input()&inputs@Input的目的是確認資料綁定input特性(properties)是可以在改變時被追蹤的。基本上來說,它是Ang...
前言Angular 2 中 Components 之間的關係示意層一層的,就長得向下面這張圖。每個格子就是一個組件,資訊向下傳遞很容易,而為了維護資料傳遞的單一性,向上傳遞需要觸發事件 (event)。所以現在當 child component 需要被 parents 知道的時候,child 會被 parents 觸發事件。parent component 會採取任何可能的行為來串聯他底下的組件,通常就是單方向往下資訊傳遞。藉由區隔向上和向下的資料傳遞,事情就變得比較簡單和比較好管理。
@Input() & inputs@Input 的目的是確認資料綁定 input 特性 (properties)是可以在改變時被追蹤的。基本上來說,它是 Angular 將 DOM 藉由特性綁定 (property bindings) 直接在組件注入數值的方法。
講了這麼多還是不太懂?還是直接看 Code 吧! 先看看 Plunker[1] 範例吧!
AppComponent 長這樣,可以看到裡面有兩個 Components:HelloComponent、GoodbyeComponent
// app/app.component.ts import {Component, Input} from angular2/core; import HelloComponent from ./hello.component; import GoodbyeComponent from ./goodbye.component; @Component({ selector: app, template: `<div> <hello-component [myName]="name"></hello-component> <hello-component myName="Other World"></hello-component> <goodbye-component [myName]="name">&l...