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;
}
}

思路:定义一个服务作为传递参数的媒介注入在要传参的组件的构造器里面,然后对服务里面属性(传参媒介)来赋值和取值实现组件之间的传参。

这样就牛逼了,任何组件之间都可以通信了,仅供参考,本人也是ng2菜鸟。

angularjs2中的非父子组件的通信的更多相关文章

  1. vue2.0父子组件以及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  2. Vue父子组件及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...

  3. vue非父子组件间通信

    有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...

  4. vue2.0 非父子组件如何通信

    1 利用父组件传递 A组件传递到父组件,再由父组件传递到B组件 2 利用新的vue实例 var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selecte ...

  5. vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

    vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...

  6. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  7. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  8. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  9. vue2.0父子组件以及非父子组件通信

    官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...

随机推荐

  1. 转载——为Xamarin更好的开发而改写的库

    本人现今一直奋战在Xamarin.Android,可能有人会疑惑Xamarin本身就是跨平台的,为什么不能直接跨IOS和Android,这个当然是最后的目标,只是现今你连Android都不能拿出符合商 ...

  2. ./configure时候遇到的问题 Cannot find install-sh, install.sh, or shtool in ac-aux

    https://blog.csdn.net/anloan/article/details/17268997

  3. AppScan 浏览器兼容解决

    手动探索的时候,因为打开的浏览器是appscan自带的,可能会存在兼容性问题,有些页面无法正常打开.那么是否可以用我们电脑上的浏览器(IE .火狐.谷歌)来进行录制 菜单栏--工具---选项----首 ...

  4. UAF学习之Adobe reader CVE-2013-3346

    学习了UAF,分析了几个漏洞,同时,也熟悉了windbg的用法,收获挺大. 基本的UAF分析流程如下: i:找有漏洞的函数 ii:找到被释放对象的类型,以及被释放对象在内存中的位置 iii:理解对象的 ...

  5. KD-Tree复习笔记(BZOJ1941 & BZOJ2648 & BZOJ4066)

    快一年了都没碰到什么必须用KDT的题目导致模板完全忘光了,重新复习了一下. K_Dimention_Tree是一种用来处理二维以上问题的数据结构(OI中一般都是二维),本质是二维启发式估价函数实现剪枝 ...

  6. [CF617E]XOR and Favorite Number/[CQOI2018]异或序列

    题目大意: 给定一个长度为$n(n\leq10^5)$的数列$A$和数$k$$(A_i,k\leq10^6)$.$m$组询问,每次询问区间$[l,r]$中有多少对$i,j(l\leq i\leq j\ ...

  7. 【NOIP模拟赛】【乱搞AC】【奇技淫巧】【乘法原理】回文串计数

    回文串计数 (calc.pas/calc.c/calc.cpp) [题目描述] 虽然是一名理科生,Mcx常常声称自己是一名真正的文科生.不知为何,他对于背诵总有一种莫名的热爱,这也促使他走向了以记忆量 ...

  8. iOS 7.1 arm64 编辑报错 警告解决办法

    昨天把我的4S更新到iOS7.1,今天发下需要更新Xcode到5.1,发现打包项目Archive的时候,多了一堆警告和错误,很是郁闷. 郁闷没有用,作为一个合格的程序员,要学会淡定!看看警告和错误的大 ...

  9. 分享最新申请IDP账号的过程,包含duns申请的分享(2013年6月)

    5月份接到公司要申请开发者账号的任务,就一直在各个论坛找申请的流程,但都是一些09年10年的比较旧的流程,现在都已经不适用了,好不容易找到2012年分享的流程吧,才发现申请过程中少了DUNS编码的步骤 ...

  10. 廖雪峰的git教程

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000