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;
}
}
思路:定义一个服务作为传递参数的媒介注入在要传参的组件的构造器里面,然后对服务里面属性(传参媒介)来赋值和取值实现组件之间的传参。
这样就牛逼了,任何组件之间都可以通信了,仅供参考,本人也是ng2菜鸟。
angularjs2中的非父子组件的通信的更多相关文章
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- vue2.0 非父子组件如何通信
1 利用父组件传递 A组件传递到父组件,再由父组件传递到B组件 2 利用新的vue实例 var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selecte ...
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
随机推荐
- Ubuntu16.10 +python3.5+Tensorflow 1.1
1.python版本检查 因为Ubuntu16.10已经默认安装了python2.7 和 3.5,检查python版本, 如果为python2.7,那么就需要我们设置python3.5为默认版本. 查 ...
- (3)C#工具箱-容器
容器特点:把控件放到容器里,移动容器控件也会跟着移动. 1.flowLayoutPanel(流布局控件) 放入控件后,会自动垂直或水平排列 拉长布局,控件自动跑到一行 2.GroupBox(组合框) ...
- Codeforces Round #164 (Div. 2) A. Games【暴力/模拟/每个球队分主场和客场,所有球队两两之间进行一场比赛,要求双方球服颜色不能相同】
A. Games time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...
- hadoop之linux常用命令
Linux的命令后面会有命令选项,有的选项还有选项值.选项的前面有短横线“-”,命令.选项.选项值之间使用空格隔开.有的命令没有选项,会有参数.选项是命令内置的功能,参数是用户提供的符合命令格式的内容 ...
- 树链剖分【p1505】[国家集训队]旅游
Description Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,T 城的任意两个景点之间 ...
- 洛谷——P2640 神秘磁石
P2640 神秘磁石 题目背景 在遥远的阿拉德大陆,有一种神秘的磁石,是由魔皇制作出来的, 题目描述 1.若给他一个一维坐标系,那么他的磁力一定要在素数坐标的位置上才能发挥的最大(不管位置坐标的大小, ...
- sql server 带有OUTPUT的INSERT,DELETE,UPDATE
原文:sql server 带有OUTPUT的INSERT,DELETE,UPDATE OUTPUT是SQL SERVER2005的新特性.可以从数据修改语句中返回输出.可以看作是"返回结果 ...
- DELPHI的一些开源项目GIT地址
DELPHI的一些开源项目GIT地址 Delphi-Cross-Sockethttps://github.com/winddriver/Delphi-Cross-Socket 跨平台的SOCKET库 ...
- 单核时代,PHP之类多线程或者多进程的,是怎么处理并发的?是排队吗?
答案是:的确就是排队.但是并不是一定要处理完请求1才能去处理请求2:实际上请求的处理过程中,有很多的时间是耗在IO等其他地方,这时可以切换去处理其他请求,把等待的时间可以充分利用起来,达到更高的吞 ...
- [置顶]
kubernetes资源对象--ResourceQuotas
概念 Resource Quotas(资源配额,简称quota)是对namespace进行资源配额,限制资源使用的一种策略. K8S是一个多用户架构,当多用户或者团队共享一个K8S系统时,SA使用qu ...