原创-angularjs2不同组件间的通信

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

时间: 2024-10-14 02:45:36

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

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

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

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

1.组件间的通信4:slot(slot:插槽,就是一个占位) slot用于标签反复使用很多次 1.1理解 此方式用于父组件向子组件传递标签数据, 其他为数据通信 外面组件向里面组件传递标签进去,直接拿我的标签显示数据就行 假如我传递的是数据,我还得映射成标签,才能显示数据 1.2子组件Child.vue 1.3父组件:Parent.vue 注意底下这两个<div>与上面的<slot>是对应关系 ============================================

vue组件间的通信之pubsub-js

本文介绍使用发布订阅的方式进行vue组件间的通信 我认为这种方式比较自由, 不存在组件间的关系问题 1. 首先安装pubsub-js npm install --save pubsub-js 2. 订阅方组件 import PubSub from 'pubsub-js' mounted(){ // 执行异常代码 // 订阅消息 PubSub.subscribe('deleteTodo',(msg,index)=>{ this.deleteTodo(index) // 调用deleteTodo方法

Intent对象(组件间的通信原理)

Intent对象是一种可以在运行时动态绑定组件的关键技术,通过使用Intent对象,可以告诉系统你想要实现什么样的操作,也就是Intent对象里面包含的请求内容,请求再由Android操作系统接收到,然后到IntentFilter过滤器中找到已经注册的组件,再调用这个组件就完成了组件间通信的过程. Intent对象描述的基本内容:1.componentName组件的名称: 2.Action动作名称: 3.Data数据:  4.Category类别: 5.Extra附加数据: 6.Flag标志位

vue--综合组件间的通信

二.综合组件之间的通信 实现一个ToDoList. ①完成所有的组件的创建和使用 ②add点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist) 核心代码:兄弟组件间通信 步骤1:var bus = new Vue() 步骤2:在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3:触发事件 bus.$emit('addEvent',123) 将todolist中数组的元素 渲染在todoitem的每一个span标签.(父

vue不同组件间的通信

不同组件间通信可以通过新建一个对象充当通信对象来实现. 1.新建一个对象A 2.在组件B中引入A对象, A.$emit('addShopCart',5);  5是传给回调函数的参数. 3.在组件C中引入A对象,A.$on('addShopCart',function(num){....}) B组件中发出一个名叫addShopCart的包裹,包裹里装着机密数字5,C组件说出了包裹名'addShopCart',所以拿到了包裹,并且可以对数字五进行进一步的处理. 具体代码如下 1.新建一个名为conn

vue 组件间的通信

(1)props:用于父组件向子组件传递消息 使用方法: 在父组件中,使用子组件时,<Child v-bind:data="data"/>,通过v-bind把子组件需要的数据传递给子组件: 在子组件中通过props来接受传过来的数据,常用写法:props:['data',......]/props:{data:dataType,.....} 举例: (2)自定义事件:用于子组件向父组件传递消息 使用方法: 在父组件中,对子组件的标签绑定一个自定义的事件监听,<Chil

Anglar 组件间的通信

一.输入属性(父组件与子组件通信) 1. 创建工程 ng new demo1 2.创建order组件 ng g component corder 3. 在order组件里定义输入属性 order组件的html 4. 父组件 app.component.ts中定义stock app.component.html, 采用双向绑定 效果图 最终父组件IBM的值,通过输入属性,把值传递给了子组件 二.输出属性(子组件与父组件通信) 1. ng g component priceQutoe 创建报价组件

ReactNative组件间的通信

参考:https://www.jianshu.com/p/f908fdc654b4 父组件向子组件通信 父组件向子组件传值 通过props传递 在父组件中name='我是父组件向子组件传递的参数' 在子组件中通过this.props.name获取 父组件向子组件传递方法 与传递参数方法相同,通过props方法这样传递test={this.onParentClick1} 在子组件中触发这个方法this.props.test(); 子组件向父组件通信 子组件向父组件传值 在子组件state中定义一个