Angular元件 父子元件通訊

angular元件間通訊

元件之間松耦合，元件之間知道的越少越好。

元件4裡面點選按鈕，觸發元件5的初始化邏輯。

傳統做法：在按鈕4的點選事件裡呼叫元件5的方法。緊密耦合。

angular：在元件4根本不知道元件5存在的情況下實現。

使用松耦合的方式在元件之間傳遞資料開發出高重用性的元件。

使用輸入輸出屬性在父子關係的元件之間傳遞資料。

元件設計成黑盒模型，用輸入屬性宣告從外部世界接收什麼東西。不需要知道這些東西從**來來。

元件只需要知道當它需要的東西外部世界提供給它以後它應該怎麼做。

元件通過輸出屬性發射事件告訴外部世界可能感興趣的東西。至於事件發射給誰元件也不需要知道。

誰感興趣誰自己訂閱元件發射的事件。

子元件定義了2個輸入屬性，被@input()裝飾器裝飾的屬性。

@input()

stockcode:string;
@input()
amount:number;

<

div>
我是父元件
div>
<
div>
<
input 
type
="text"
[(ngmodel)]
="stock"
placeholder
="請輸入****"
angular元件可以使用eventemitter物件發射自定義事件，這些事件可以被其它元件處理。 eventemitter是rxjs中subject類的乙個子類，在響應式程式設計中，它既可以作為被觀察者，也可以作為觀察者。就是說eventemitter物件即可以通過它的emit方法發射自定義事件，也可以通過subscribe方法來訂閱eventemitter發射出來的事件流。
如何使用eventemit從元件內部向外發射事件？
例子場景：**元件
假設需要乙個元件，可以連線到**交易所，並且實時的顯示變動的****，為了讓這個元件可以在不同的金融類的應用中重用，除了實時顯示****，元件還應該將最新的****傳送到元件之外，這樣其它的元件就可以針對變動的****執行相應的業務邏輯。
note：將特定的資料結構用類或介面來明確定義是乙個良好的習慣
export class pricequotecomponent implements

oninit ,1000)
} ngoninit() }//
封裝乙個**物件來封裝****資訊
//將特定的資料結構用類或介面來明確定義是乙個良好的習慣
eventemit後面的范型是要往出發射的事件的資料是什麼型別的。
import  from '@angular/core'

;@component()
export 
class pricequotecomponent implements
oninit , 1000)
} ngoninit() }//
封裝乙個**物件來封裝****資訊
//將特定的資料結構用類或介面來明確定義是乙個良好的習慣
export class
pricequote 
}
父元件模版中通過事件繫結的方式來捕獲並處理。 

export class

stock = ""
; pricequote: pricequote = new pricequote("", 0);
//event的型別就是子元件emit的時候發射出來的資料的型別
//父元件中通過event就可以拿到
pricequotehandler(event:pricequote)
}
模版

這是在**元件外部

/>
****是},
****是}
預設情況下，事件名字就是output輸出屬性的名字，可以改變事件名字，通過
@output("pricechange") //

發射事件需要寫上output
//eventemitter需要乙個范型
lastprice: eventemitter= new eventemitter();
模版中也改為

總結：通過輸出屬性發射事件，並通過事件攜帶資料，在父元件模版中通過事件繫結的方式來捕獲並處理。 
如果兩個元件之間不存父子關係，如何以一種松耦合的方式來傳遞資料。此時需要使用中間人模式。
 
angular 父子元件通訊
父元件不僅可以給子元件傳遞簡單的資料，還可以把自己的方法以及整個父元件傳給子元件 子元件獲取父元件的 msg 資料 父元件呼叫子元件的時候傳入資料 msg msg 子元件引入 input 模組 import from angular core 子元件中 input 接收父元件傳過來的資料 expor...
angular 父子元件通訊
1.子元件呼叫父元件的方法和資料 input 裝飾器 1.fathercomponent.html中 tochildstr 父元件中定義的資料 fathermethod 父元件中的方法 fathercomponent 父元件本身，this指代父元件例項，通過 fathercompoent 將父元件例...
angular6之父子元件通訊
父元件向子元件傳入資料 父元件訪問子元件的方法和資料 方法一 新增方法二 父元件ts 中呼叫子元件的方法和屬性。首先匯入模組viewchild。import from angular core 在父元件的類中將子元件作為viewchild注入到父元件中 viewchild additemcompon...