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只是给一个简单的思路给大家,大家可以自由发挥

原创-angularjs2不同组件间的通信的更多相关文章

  1. angularjs2 不同组件间的通信

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...

  2. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  3. ZeroMQ(java)之I/O线程的实现与组件间的通信

    算是开始读ZeroMQ(java)的代码实现了吧,现在有了一个大体的了解,看起来实现是比较的干净的,抽象什么的不算复杂... 这里先来看看它的I/O线程的实现吧,顺带看看是如何实现组件的通信的.... ...

  4. vuejs单一事件管理组件间的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. React中父子组件间的通信问题

    1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)

  6. Vue2不使用Vuex如何实现兄弟组件间的通信

    在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...

  7. (尚033)Vue_案例_slot(组件间的通信4:slot)

    1.组件间的通信4:slot(slot:插槽,就是一个占位) slot用于标签反复使用很多次 1.1理解 此方式用于父组件向子组件传递标签数据, 其他为数据通信 外面组件向里面组件传递标签进去,直接拿 ...

  8. angular组件间的通信(父子、不同组件的数据、方法的传递和调用)

    angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...

  9. vue组件间的通信

    组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...

随机推荐

  1. [复习]java中hashCode的作用

    1.HashCode的官方文档定义 (1)hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如java.util.HashTable提供的哈希表. (2)hashCode的 ...

  2. 解决MVC中JsonResult返回 弹出文件下载对话框

    设置一下返回类型为HTML TEXT就可以了 JsonResult json = Json(xxx, JsonRequestBehavior.DenyGet); json.ContentType = ...

  3. Linux下快速搭建php开发环境

    php开发环境快速搭建 一.Linux下快速搭建php开发环境 1.安装XAMPP for Linux XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包,使用XA ...

  4. 相机标定:kalibr标定工具箱使用总结

    1 多相机标定 1.1采集图像和IMU 1.2制作Bag包 1)组织文件结构 ~/kalibr_workspace/test/stereo_calib bagsrc cam0 (1+time(0))* ...

  5. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  6. Android在listview添加checkbox实现单选多选操作问题

    android根据View的不同状态更换不同的背景http://www.eoeandroid.com/thread-198029-1-1.html android 模仿朋友网推出的菜单效果[改进版]h ...

  7. 构造器和多态(Chapter8.3)

    构造器不具有多态性(它们是static方法,只不过该static声明是隐式的),但还是非常有必要理解构造器怎样通过多态在复杂的层次结构中运作,这一理解将有助于大家避免一些令人不快的困扰. 在main中 ...

  8. Reflux中文教程——概览

    翻译自github上的reflux项目,链接:https://github.com/reflux/refluxjs 〇.安装及引入 安装: npm install reflux 引入: var Ref ...

  9. C#中的泛型和泛型集合

    泛型 泛型引入了一个概念:类型参数.通过使用类型参数(T)减少了运行时强制转换或装箱操作的风险,通过泛型可以最大限度的重用代码,保护类型的安全及提高性能,他的最常见应用就是创建集合类,可以约束集合类中 ...

  10. React组件实现越级传递属性

    如果有这样一个结构:三级嵌套,分别是:一级父组件.二级子组件.三级孙子组件,且前者包含后者,结构如图: 如果把一个属性,比如color,从一级传递给三级,一般做法是使用props逐一向下传递,代码如下 ...