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只是给一个简单的思路给大家,大家可以自由发挥
angularjs2 不同组件间的通信的更多相关文章
- 原创-angularjs2不同组件间的通信
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- ZeroMQ(java)之I/O线程的实现与组件间的通信
算是开始读ZeroMQ(java)的代码实现了吧,现在有了一个大体的了解,看起来实现是比较的干净的,抽象什么的不算复杂... 这里先来看看它的I/O线程的实现吧,顺带看看是如何实现组件的通信的.... ...
- vuejs单一事件管理组件间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
- (尚033)Vue_案例_slot(组件间的通信4:slot)
1.组件间的通信4:slot(slot:插槽,就是一个占位) slot用于标签反复使用很多次 1.1理解 此方式用于父组件向子组件传递标签数据, 其他为数据通信 外面组件向里面组件传递标签进去,直接拿 ...
- angular组件间的通信(父子、不同组件的数据、方法的传递和调用)
angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
- vue组件间的通信
组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...
随机推荐
- Mongo的Replica Sets (复制集)的配置全过程和心得体会
http://blog.csdn.net/bloggongchang/article/details/7272403 一.MongoDB Replica Sets(副本集)简单的说就是有自动故障恢复功 ...
- noip模拟赛 将军令
分析:对于前18个点可以考虑非常恶心的树形dp,不推荐这种方法.其实贪心还是很显然的.每个小队可以控制距离不超过k里的驿站,肯定要让这个k里不能白白浪费.对于所有叶子节点,如果它还没有被控制,那么肯定 ...
- Quartz进一步学习与使用
一.再思考 了解Quartz.NET的基本使用方法了.但如果想方便的知道某个作业执行情况,需要暂停,启动等操作行为,这时候就需要个Job管理的界面,如何才能达到我们想到的效果,查看相关Quartz.n ...
- 解决Android Studio2.0不能使用HttpClient
在build.gradle中的android {}中加上useLibrary 'org.apache.http.legacy'
- [bzoj5343][Ctsc2018]混合果汁_二分答案_主席树
混合果汁 bzoj-5343 Ctsc-2018 题目大意:给定$n$中果汁,第$i$种果汁的美味度为$d_i$,每升价格为$p_i$,每次最多添加$l_i$升.现在要求用这$n$中果汁调配出$m$杯 ...
- ubuntu忘记root密码的解决办法
ubuntu忘记密码,不需要重装系统即可重新设置root密码,以下是步骤: 1)在系统一启动时,按ESC键,目的是为了出现选单页面 2) 当看到选单页面时,此时按下[e] 这个键,此时会进入grub ...
- Linux下查看硬盘UUID和修改硬盘UUID(转)
查看硬盘UUID: 1. ls -l /dev/disk/by-uuid 2. blkid /dev/sda5 修改硬盘UUID: 1.新建和改变分区的UUID sudo uuidgen | xarg ...
- Spring PropertyPlaceholderConfigure 载入配置文件
在開始这篇博客的主题之前,我们先来了解一下Spring配置文件以及包括的相关内容. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2 ...
- python可变參数调用函数问题
一直使用python实现一些想法,近期在使用python的过程中出现这样一个需求,定义了一个函数.第一个是普通參数.第二个是默认參数,后面还有可变參数,在最初学习python的时候,都知道非keywo ...
- Mesos, Marathon, Docker 平台部署记录
Mesos, Marathon, Docker 平台部署记录 所有组件部署基于Ubuntu 14.04 x64 主机 IP 角色 master 192.168.1.3 Mesos Master, Ma ...