Angular學習 元件通訊

2022-03-06 09:55:57 字數 1340 閱讀 3474

父元件不僅可以給子元件傳遞簡單的資料,還可以把自己的方法及整個父元件傳給子元件。

(1).父元件呼叫子元件的時候傳入資料

(2).子元件引入input模組

(3).子元件中@input接收父元件傳過來的資料

如果要將整個父元件傳給子元件,可以把this傳過去

如果父元件有haha屬性,可以在子元件裡直接使用this.home.haha獲取資料

(1).父元件呼叫子元件,子元件設定模板引用變數

(2).父元件引入viewchild模組,通過@viewchild("footer",) footer:any;獲取子元件,此時footer就是子元件,通過this.footer.run()就可以呼叫子元件的run()方法。

(1).子元件引入output、eventemitter模組

$event就是"我是子元件的資料"

1.service

2.rxjs

通過service通訊

(1).建立服務

(2).header元件,設定要傳給footer元件的資料

(3).footer元件,獲取header元件傳遞的資料

Angular元件 父子元件通訊

angular元件間通訊 元件之間松耦合,元件之間知道的越少越好。元件4裡面點選按鈕,觸發元件5的初始化邏輯。傳統做法 在按鈕4的點選事件裡呼叫元件5的方法。緊密耦合。angular 在元件4根本不知道元件5存在的情況下實現。使用松耦合的方式在元件之間傳遞資料開發出高重用性的元件。使用輸入輸出屬性在...

angular 父子元件通訊

父元件不僅可以給子元件傳遞簡單的資料,還可以把自己的方法以及整個父元件傳給子元件 子元件獲取父元件的 msg 資料 父元件呼叫子元件的時候傳入資料 msg msg 子元件引入 input 模組 import from angular core 子元件中 input 接收父元件傳過來的資料 expor...

Angular元件之間通訊

元件之間會有下列3種關係 1.父子關係 2.兄弟關係 3.沒有直接關係 通常採用下列方式處理 某些方式是框架特有 元件間的通訊,如下 1父子元件之間的互動 input output 模板變數 viewchild 2非父子元件 service localstorage 3還可以利用session等伺服...