angularjs2中的非父子组件的通信
2024-09-08 09:41:40
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菜鸟。
最新文章
- shell实现SSH自动登陆
- java11
- java中的注解(Annotation)
- SQL if exists database总是出现语法错误
- java小程序 实例 二分法查找
- js获取节点
- yaxim
- Lua开发环境配置
- CSU 1160(进制问题)
- BZOJ 1261: [SCOI2006]zh_tree( 区间dp )
- Effective Java 第三版——41.使用标记接口定义类型
- maven clean或package报错
- ESP8266开发综合篇第十四节(LUA)-8266作为TCP服务器,Android客户端连接,显示温湿度,控制继电器
- ASP返回JQuery EasyUI树形要求的JSON格式
- div 自适应高度
- Eclipse下SpringBoot没有自动加载application.properties文件
- Python3 读、写Excel文件
- 微信小程序 发现之旅(二)—— 自定义组件
- iOS runtime实用篇--和常见崩溃say good-bye
- 【es6】数组扩展