原創-angularjs2不同組件間的通信

来源:http://www.cnblogs.com/hlkawa/archive/2017/05/05/6815023.html
-Advertisement-
Play Games

AngualrJs2官方方法是以@Input,@Output來實現組件間的相互傳值,而且組件之間必須父子關係,下麵給大家提供一個簡單的方法,實現組件間的傳值,不僅僅是父子組件,跨模塊的組件也可以實現傳值 思路:定義一個服務作為傳遞參數的媒介註入在要傳參的組件的構造器裡面,然後對服務裡面屬性(傳參媒介 ...


AngualrJs2官方方法是以@Input,@Output來實現組件間的相互傳值,而且組件之間必須父子關係,下麵給大家提供一個簡單的方法,實現組件間的傳值,不僅僅是父子組件,跨模塊的組件也可以實現傳值

/**
 *1.定義一個服務,作為傳遞參數的媒介
 */
@Injectable()
export class PrepService{

  //定義一個屬性,作為組件之間的傳遞參數,也可以是一個對象或方法    
  profileInfo: any;
  
  }
 /**
 *2.傳遞參數的組件,我這邊簡單演示,直接就在構造器裡面實現傳參了
 */ 
@Component({
  selector: 'XXXXXXX',
  templateUrl:"./XXXXXX.html",
  styleUrls:["./XXXXXXX.css"]
})

export class ReportComponent {

  //定義要傳遞的參數(此處是一個對象,也可以是方法)        
  reponsePrep:any ={
    name : "腊肉豆皮",
    address:"中歐五花肉"
  }

  //構造器註入PrepService服務    
  constructor(private ps:PrepService){
    //把當前組件參數賦值給PrepService的profileInfo屬性
    ps.profileInfo = this.reponsePrep;
  }
 }
  /**
 *3.接受參數的組件
 */ 
@Component({
  selector: 'YYYYYY',
  templateUrl:"./YYYYYYYY.html",
  styleUrls:["./YYYYYYY.css"]
})

export class commandComponent {

  //定義參來接收來自PrepService服務profileInfo屬性的值
  requestPrep:any; 

  //構造器註入PrepService服務    
  constructor(private ps:PrepService){
    //把PrepService的profileInfo屬性的值賦值給requestPrep實現組件的之間的傳值
    this.requestPrep = ps.profileInfo;
  }
 }

思路:定義一個服務作為傳遞參數的媒介註入在要傳參的組件的構造器裡面,然後對服務裡面屬性(傳參媒介)來賦值和取值實現組件之間的傳參

以上demo只是給一個簡單的思路給大家,大家可以自由發揮

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本系列將由淺入深的帶大家深入最新的單點登錄SSO方案選型與架構開發實戰。附動畫演示。 從業十多年,為政府、電信、跨國公司顧問和實施的單點登錄解決方案無數,深諳其痛點與關鍵。 大部分單點登錄方案,從產品方案選型起就存在根本性問題,往往導致: 1. 受困於諸多被集成系統的改造。 2. 依賴特定終端... ...
  • 參考:http://design-patterns.readthedocs.io/zh_CN/latest/creational_patterns/factory_method.html ...
  • 一、何為單例設計模式 單例模式,顧名思義就是單個實例,程式中某個類只有一個實例存在。通常實在需要共用某個資源避免資源損耗的情況下使用到的。 二、單例設計模式的代碼實現 一說到單例模式的概念,我們首先會想到下麵的這種的寫法 把構造器設置為private方法,只有在類內部的方法中才能調用,外部無法進行調 ...
  • 純 http 上的雙向通信 最近大概看了下 rxJava 的訂閱者模式,然後突發奇想有沒有可能用類似的思路實現純 http 上的雙向通信 A 是傳統的 http 伺服器 B 是普通的客戶端,假設我們能夠在 B 上啟動一個簡易的 http server 並且有辦法實現公網訪問 然後通過類似事件訂閱的方 ...
  • 軟體架構設計就是軟體系統的‘佈局謀篇’,是軟體抽象發展到一定階段的產物。軟體設計人員學習軟體架構知識,旨在站在較高的層面上,整體的解決好軟體的設計,復用,質量和維護等方面的實際問題。 ...
  • JavaScript 通過Document 類型表示文檔。在瀏覽器中,document 對象是HTMLDocument(繼承自Document 類型)的一個實例,表示整個HTML 頁面。而且,document 對象是window 對象的一個屬性,因此可以將其作為全局對象來訪問。Document 節點 ...
  • 1、Package Contorl 包安裝 Package Contorl:由Sublime Text提供的絕對必要的包管理器。 1.按Ctrl+`打開console。 2.粘貼一下代碼到底部命令行並回車 import urllib.request,os,hashlib; h = '7183a2d3 ...
  • 上一篇說到,因為有新朋友加入,對前端開發有了新的要求。原來基於 Bootstrap 的 UI 就不要了。在網上(其實是 GitHub 上)逛了幾圈,最後使用了 "antd admin" 這個框架做為基礎模板,然後根據悟空 CRM 的特色進行了一些改變: 在原來的 antd admin 的頁面里,應該 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...