angularjs2 不同组件间的通信
2024-08-30 21:26:07
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只是给一个简单的思路给大家,大家可以自由发挥
最新文章
- Qt 拷贝文件目录
- Android 四大组件 与 MVC 架构模式
- Nginx日常操作和配置
- text-overflow:ellipsis
- SQL SERVER 数据库查询表和字段信息语句
- iptables 工具
- django 自定义标签和过滤器
- 如何:通过对字符串应用 HTML 编码在 Web 应用程序中防止脚本侵入
- PHP isset()与empty()的区别详解
- js源码保护
- JNDI(转载)
- C# Webform中读取Windows AD/LDAP域用户清单
- “selection does not contain a main type”解决方法
- frame buffer简单应用
- MVC基本登陆与验证码功能实现
- Redis与SpringBoot整合
- cefSharp 开发随笔
- 2、编程工具IAR、烧写工具SmartRF的使用
- BZOJ4555 HEOI2016/TJOI2016求和(NTT+斯特林数)
- day24 包
热门文章
- tarjan 割点 割边
- HDU3032 nim博弈
- Reactor Cooling(无源汇有上下界网络流)
- Java中如何获取spring中配置的properties文件内容
- atom的react自动补全插件
- Kafka单机Windows环境搭建
- GNS3配置SecureCRT
- powerShell赋权限
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
- WebSphere报错指南