摘要:方便自己以后的使用。父組件使用子組件對象操控子組件傳遞信息或者調用方法。
這里簡單的記錄自己在angular2中,使用組件通信的一些方法。方便自己以后的使用。
一、組件之間通信的方式
使用事件通信(EventEmitter,@Output):
場景:可以在父子組件之間進行通信,一般使用在子組件傳遞消息給父組件;
步驟:a. 子組件創建事件EventEmitter對象,使用@output公開出去;b. 父組件監聽子組件@output出來的方法,然后處理事件。
代碼:
// child 組件 @Component({ selector: "app-child", template: "", styles: [``] }) export class AppChildComponent implements OnInit { @Output() onVoted: EventEmitter= new EventEmitter(); ngOnInit(): void { this.onVoted.emit(1); } } // parent 組件 @Component({ selector: "app-parent", template: ` `, styles: [``] }) export class AppParentComponent implements OnInit { ngOnInit(): void { throw new Error("Method not implemented."); } onListen(data: any): void { console.log("TAG" + "---------->>>" + data); } } ps:很討厭貼代碼,太占空間了;
2.使用@ViewChild和@ViewChildren:
場景:一般用于父組件給子組件傳遞信息,或者父組件調用子組件的方法;
步驟:a.父組件里面使用子組件;b.父組件里面使用@ViewChild獲得子組件對象。 c.父組件使用子組件對象操控子組件;(傳遞信息或者調用方法)。
代碼:
// 子組件 @Component({ selector: "app-child2", template: "", styles: [``] }) export class AppChildComponent2 implements OnInit { data = 1; ngOnInit(): void { } getData(): void { console.log("TAG" + "---------->>>" + 111); } }
// 父組件 @Component({ selector: "app-parent2", template: ``, styles: [``] }) export class AppParentComponent2 implements OnInit { @ViewChild(AppChildComponent2) child: AppChildComponent2; ngOnInit(): void { this.child.getData(); // 父組件獲得子組件方法 console.log("TAG"+"---------->>>"+this.child.data);// 父組件獲得子組件屬性 } }
3.使用服務Service進行通信,即:兩個組件同時注入某個服務:
場景:需要通信的兩個組件不是父子組件或者不是相鄰組件;當然,也可以是任意組件。
步驟:a.新建一個服務,組件A和組件B同時注入該服務;b.組件A從服務獲得數據,或者想服務傳輸數據;c.組件B從服務獲得數據,或者想服務傳輸數據。
代碼:
// 組件A @Component({ selector: "app-a", template: "", styles: [``] }) export class AppComponentA implements OnInit { constructor(private message: MessageService) { } ngOnInit(): void { // 組件A發送消息3 this.message.sendMessage(3); const b = this.message.getMessage(); // 組件A接收消息; } }
// 組件B @Component({ selector: "app-b", template: ``, styles: [``] }) export class AppComponentB implements OnInit { constructor(private message: MessageService) { } ngOnInit(): void { // 組件B獲得消息 const a = this.message.getMessage(); this.message.sendMessage(5); // 組件B發送消息 } }
二、關于我自己的消息服務模塊
場景:我涉及到一個項目,里面需要實現的是所有組件之間都有可能通信,或者是一個組件需要給幾個組件通信。
設計方式:(1). 使用RxJs,定義一個服務模塊MessageService,所有的信息都注冊該服務;(2). 需要發消息的地方,調用該服務的方法;(3). 需要接受信息的地方使用,調用接受信息的方法,獲得一個Subscription對象,然后監聽信息;(4). 當然,在每一個組件Destory的時候,需要this.subscription.unsubscribe();
代碼:
// 消息中專服務 @Injectable() export class MessageService { private subject = new Subject(); /** * content模塊里面進行信息傳輸,類似廣播 * @param type 發送的信息類型 * 1-你的信息 * 2-你的信息 * 3-你的信息 * 4-你的信息 * 5-你的信息 */ sendMessage(type: number) { console.log("TAG" + "---------->>>" + type); this.subject.next({type: type}); } /** * 發送圖片信息 * @param src:圖片地址 */ sendImages(src: string) { console.log("AG1" + "---------->>>" + src) this.subject.next({url: src}); } /** * 清理消息 */ clearMessage() { this.subject.next(); } /** * 獲得消息 * @returns {Observable } 返回消息監聽 */ getMessage(): Observable { return this.subject.asObservable(); } }
// 使用該服務的地方,需要注冊MessageService服務; constructor(private message: MessageService) { } // 消息接受的地方; public subscription: Subscription; ngAfterViewInit(): void { this.subscription = this.message.getMessage().subscribe(msg => { // 根據msg,來處理你的業務邏輯。 }) } // 組件生命周期結束的時候,記得注銷一下,不然會卡卡卡卡; ngOnDestroy(): void { this.subscription.unsubscribe(); } // 調用該服務的方法,發送信息; send():void { this.message.sendImages("www.baidu.com"); // 發送圖片地址 this.message.sendMessage(2); // 發送信息消息 }
總結:這里的MessageService,就相當于使用廣播機制,在所有的組件之間傳遞信息;不管是數字,字符串,還是對象都是可以傳遞的,而且這里的傳播速度也是很快的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83825.html
摘要:方便自己以后的使用。父組件使用子組件對象操控子組件傳遞信息或者調用方法。 這里簡單的記錄自己在angular2中,使用組件通信的一些方法。方便自己以后的使用。 一、組件之間通信的方式 使用事件通信(EventEmitter,@Output): 場景:可以在父子組件之間進行通信,一般使用在子組件傳遞消息給父組件; 步驟:a. 子組件創建事件EventEmitter對象,使用@outpu...
摘要:為了簡單起見,在本文中將會使用。已經實例化了并且將它的模板載入到了元素中。中的依賴注入發生在該類的構造函數中,因此我們將在構造函數中注入。 國內 Angular2 資料比較少,這里看到一篇不錯的入門文章就分享過來了 —— Angular 2 快速上手,這里面還有很多有關于 Angular2 的文章,感興趣的朋友可以去看一看 目前angular2已經來到了beta版,這意味著它已經做好了...
摘要:通過增加刪除元素改變布局的。譬如和控制元素顯示隱藏,或者改變元素行為的。譬如設計看過我之前介紹以手寫依賴注入的朋友應該已經對行為驅動多少有些了解了。她有,并且包含了至少一個和一個標簽。,將左邊的事件傳遞給了右邊的表達式通常就是事件處理函數。 前集回顧 在上一章里我們講了如何為angular2搭建開發環境(還沒搭起來的趕緊去看哦),并使之跑起來我們的第一個My First Angular...
摘要:現在回過頭總結,才又進一步的揭開了閉包的一層后臺管理系統解決方案前端掘金基于系列的后臺管理系統解決方案。什么是繼承大多數人使用繼承不外乎是為了獲得基于的單頁應用項目模板前端掘金小貼士本項目已升級至。 關于js、jq零碎知識點 - 掘金寫在前面: 本文都是我目前學到的一些比較零碎的知識點,也是相對偏一點的知識,這是第二篇。前后可能沒有太大的相關性,需要的朋友可以過來參考下,喜歡的可以點個...
摘要:的關鍵構成梳理了一下,需要配合的庫去使用,是因為要解決通信問題。還有各個事件之間,有可能存在依賴關系,事件后,也觸發。相比于傳統的事件系統,融入了不少的思想。中,將會是最大的門檻之一。 從學習React到現在的一點感受 我覺得應該有不少同學和我一樣,上來學React,覺得甚是驚艷,看著看著,發現facebook 安利了一個flux,圖畫的巨復雜,然后各種例子都有用這個東西,沒辦法,硬著...
閱讀 2038·2021-10-08 10:05
閱讀 1881·2021-09-22 15:31
閱讀 3002·2021-09-22 15:13
閱讀 3478·2021-09-09 09:34
閱讀 2072·2021-09-03 10:46
閱讀 3112·2019-08-30 15:56
閱讀 1696·2019-08-30 15:53
閱讀 2350·2019-08-30 15:44