Angular學習筆記之元件之間的互動

1、@input：可設定屬性

當它通過屬性繫結的形式被繫結時，值會「流入」這個屬性。

在子元件中使用，例如：@input（）name:string

父元件定義賓亮，並在父元件的模板中繫結，例如：

子元件模板中：}

子元件控制器中：@input（）name:string

父元件控制器中：username = "lion"

父元件模板中：[name] = "username" （在呼叫的子元件的選擇器中繫結）

此時，資料即從父元件傳入子元件，子元件能在本身的模板中使用改「name」變數

2、@output：可觀察物件型屬性

幾乎總是返回angular 的eventemitter，當它通過事件繫結的形式被繫結時，值會「流出」這個屬性

在子元件中使用。例如：@output() arrivemessage = new eventemitter()

子元件模板中繫結乙個事件，例如按鈕的點選事件（click()），在子元件控制器中定義乙個被繫結到按鈕點選事件的事件(message())

，並在該事件中做出處理，即emit(彈射)例中的arrivemessage，在父元件的模板中繫結arrivemessage，繫結位置為子元件的選擇器位置，最後在父元件的控制器中進行事件處理(footerarrivemessage())

例如：子元件模板：(click) = "message()"

子元件控制器：@output() arrivemessage = new eventemitter()

message()

父元件模板：(arrivemessage) = "footerarrivemessage()"

父元件控制器中：footerarrivemessage()

3、子元件與子元件之間通過中間人模式實現通訊（需要有乙個共同的父元件）

4、子元件與子元件之間通過服務來實現元件之間的通訊（沒有共同父元件）

5、父元件與子元件通過本地變數互動

在父元件的模板中使用，即在愛元件的選擇器中宣告乙個本地變數（#變數名）例如：#name，該變數名即可代表子元件，之後可在父元件模板中呼叫子元件的屬性和方法

例如：(click) = "name.屬性" 或 (click) = "name.方法"

缺陷：父子組建的連線必須全部在父元件的模板中進行，在父元件的控制器中無法訪問子元件的屬性和方法

6、父元件呼叫@viewchild()

總結：@input：在子元件中使用。資料從父元件傳遞到子元件

@output：在子元件中使用。子元件的元素事件（例如：點選事件）的處理函式發射出父元件的自定義事件，觸發自定義事件，父元件執行函式處理該自定義事件。

區域性變數實現資料互動：在父元件中使用。父元件在區域性模板中自定義乙個區域性變數，形如#····。通過區域性變數訪問子元件的公共變數和方法。侷限是只能在區域性模板中使用，不能在父元件的類中對子元件的相關變數和方法進行修改。