angular組件間通訊的實現(xiàn)方法示例
前言
一個Angular應(yīng)用一般情況下包含多個組件,而且要讓組件互相之間能進行通訊(數(shù)據(jù)傳送),這樣才能構(gòu)成一個有機的完整系統(tǒng)。
1、情景引入
下面例舉一個實際遇到的情況:
上圖頁面包含兩個組件,“新增班級組件”和“選擇教師組件”,在新增班級時需要選擇改班級的管理教師,管理教師列表要從數(shù)據(jù)庫中獲取。選擇好教師后,“選擇教師組件”要把選擇的教師對象傳遞回“新增班級組件”,這其中涉及到對象傳遞稱為通訊。
2、組件關(guān)系
組件之間有幾種典型的關(guān)系:父子關(guān)系、兄弟關(guān)系、沒有直接關(guān)系
父子關(guān)系說明:有A、B兩個組件(不一定在同一個模塊),如果A組件的view頁面中引用了B的selector標簽,則稱A為B的父組件,或B為A的子組件。
3、通訊方案
了解完組件存在的關(guān)系,相應(yīng)地,組件之間有以下幾種典型的通訊方案:
- 直接的父子關(guān)系:父組件直接訪問子組件的 public 屬性和方法
- 直接的父子關(guān)系:借助于 @Input 和 @Output 進行通訊
- 沒有直接關(guān)系:借助于 Service 單例進行通訊
- 利用 cookie 和 localstorage 進行通訊
- 利用 session 進行通訊
直接調(diào)用
假設(shè)BComponent是AComponent的子組件。
對于有直接父子關(guān)系的組件,父組件可以直接訪問子組件里面 public 型的屬性和方法,示例代碼片段如下:
<B #child></B> <button (click)="child.childFunction()">調(diào)用子組件方法</button>
顯然,子組件B里面必須暴露一個 public 型的 childFunction 方法,就像這樣:
public childFunction():void{ console.log("子組件的名字是"); }
以上是通過在模板里面定義局部變量的方式來直接調(diào)用子組件里面的 public 型方法。在父組件的內(nèi)部也可以訪問到子組件的實例,需要利用到 @ViewChild 注解,示例如下:
@ViewChild(BComponent) private bComponent: BComponent;
如果通過 @ViewChild 注解,父組件直接訪問子組件,那么兩個組件之間的關(guān)系就被固定死了。父子兩個組件緊密依賴,誰也離不開誰,不能單獨使用了。盡量避免這樣做。
@Input 和 @Output
同樣假設(shè)BComponent是AComponent的子組件。
我們可以利用 @Input 裝飾器,讓父組件直接給子組件傳遞參數(shù),子組件BComponent上這樣寫:
@Input() public title:string;
父組件view上可以這樣設(shè)置 title 這個參數(shù)(這個參數(shù)可以是個父組件想要傳給子組件的變量或?qū)ο蟮龋?/p>
<B title="Hello Angular"></B>
前面是父組件->子組件傳遞數(shù)據(jù),過程相對簡單,下面是子組件->父組件傳數(shù)據(jù),過程較復(fù)雜。
@Output 的本質(zhì)是事件機制,我們可以利用它來監(jiān)聽子組件上派發(fā)的事件,子組件上這樣寫:
@Output() public selected=new EventEmitter<要傳給父組件的對象類型>();
EventEmitter:在angular中組件通過定義EventEmitter 事件彈射器的方式由子組件向父組件發(fā)送數(shù)據(jù)。
selected是一個事件,觸發(fā) selected 事件的方式如下:
this.selected.emit(對象);
在子組件上定義一個方法onChange(),使子組件view能夠調(diào)用該方法觸發(fā) selected 事件:
onChange() { this.selected.emit(要傳給父組件的對象); }
父組件可以這樣監(jiān)聽selected事件:
<B (selected)➊="onTeacherSelected($event)①"></B>
➊ 使用我們剛剛在子組件中定義的@Output() selected
① 方法名需要在父組件C層中定義,用于接收子組件傳過來的事件,而參數(shù)名可以隨性起,但我們一般為起名為$event以示此處為該組件的一個彈射器。
總結(jié)
到此這篇關(guān)于angular組件間通訊的文章就介紹到這了,更多相關(guān)angular組件間通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Angular.JS學(xué)習(xí)之依賴注入$injector詳析
隨著javaEE的spring框架的興起,依賴注入(IoC)的概念徹底深入人心,它徹底改變了我們的編碼模式和思維。在AngularJS中也有依賴注入的概念,像spring中的依賴注入,但是又有所不同。Angular中只需要在需要的地方聲明一下即可,類似模塊的引用,因此十分方便。2016-10-10AngularJS實現(xiàn)動態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-05-05Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解
作為一種大受歡迎的Web應(yīng)用程序框架,Angular終于迎來了版本4.0,下面這篇文章主要給大家介紹了關(guān)于Angular 4.0學(xué)習(xí)教程之架構(gòu)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover,tooltip和popover是輕量的、可擴展的、用于提示的指令。具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-07-07對angularjs框架下controller間的傳值方法詳解
今天小編就為大家分享一篇對angularjs框架下controller間的傳值方法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10