Angular4关于一个组件获取另一个组件中的变量的另外一种方式
来源:互联网 发布:英文网络面试常用口语 编辑:程序博客网 时间:2024/05/16 15:28
之前写过一篇关于组件之间通讯的博客,是使用@Output + EventEmitter的方式实现父组件从子组件从获取到变量,因为之前的在父组件的html文件中使用子组件的选择器时会出现页面的不兼容,后来偶然发现除了使用上面的这种方式还可以使用模型驱动的方式让子组件中的变量的值传到模型的具体变量中去,这样就可以间接地实现获取子组件的变量(因为它需要通过模型这个步骤而不是直接在子组件中获取变量,但是实现起来的效果是一样的,而且绕开了在父组件中去使用子组件的选择器,使得页面不会出现不兼容)。下面讲一下具体步骤以及具体的代码:
(1) 创建一个模型
export class BarcodeModel{ public codeResult: string}
(2) 创建一个服务
这个服务主要是用于对模型的实例化操作,并提供对这个实例对象的操作方法比如setting()或者getting()供外部调用,而且这么写会使整个结构清晰明了,提高代码的可重复性,比如如果你把写在service中的代码写在子组件中的活,结构看起来就很混乱。
export class BarcodeService { barcodeModel:BarcodeModel={ codeResult:'' } constructor() { if (localStorage.getItem("barcodeModel")!=null) { this.barcodeModel=JSON.parse(localStorage.getItem("barcodeModel")); } } //获取当前的实例对象 getSettings(){ return this.barcodeModel; } //对实例对象进行存储的操作,JSON.stringify()是将对象转换以json的字符串形式来表示,详细可以去查看JSON的文档 changeBarcode(barcodeModel:BarcodeModel){ localStorage.setItem("barcodeModel",JSON.stringify(barcodeModel)); }}
(3)在子组件中将想要传递的变量赋值给模型中的变量,然后调用service中的方法进行存储
export class MediaStreamComponent { barcodeModel:BarcodeModel; constructor(barcodeService:BarcodeService) { this.barcodeModel = this.barcodeService.getSettings(); }; this.barcodeModel.codeResult = this.lastResult; this.barcodeService.changeBarcode(this.barcodeModel); }
(4)在父组件中直接调用模型中的变量即可
export class ShippingComponent{ private code; constructor(private serviceBarcode: BarcodeService){} this.code = this.serviceBarcode.getSettings().codeResult;}
总结
总的来说就是将模型当作搬运工,从子组件中获得变量并存储起来,然后父组件就可以很轻松的获取到模型中这个变量的值,思路很清晰,代码也不复杂,希望对你有帮助,记得上面的代码套入你的项目的时候要引入service的路径,因为每个人的路径不一样所以就没写上去了。
阅读全文
0 0
- Angular4关于一个组件获取另一个组件中的变量的另外一种方式
- Angular4关于组件与组件之间的通信
- Angular4中关于component组件如何获取前端页面用户输入的值
- Angular4 树组件的使用
- Angular4自制一个市县二级联动组件
- ExtJs组件的获取方式
- 关于Mysql中in参数变量的另外一种写法
- hover一个组件,另一个组件css效果
- Angular4-在线竞拍应用-组件的生命周期
- Angular4.0分页组件
- angular4----组件间通信
- Angular4 组件生命周期钩子
- angular4中父组件如何调用子组件的方法
- 关于调试com组件中的一个接口
- Android在一个activity改变另一个activity的组件
- ADF获取一些组件指的方式
- ExtJs 获取其他页面的组件方式
- Angular4中的组件、模块、服务、装饰器、控制器
- 抽屉类型代码
- 仿AppStore 首页 转场动画
- 【工作中学到的小技巧】json
- 宋宝华:用systemd-nspawn运行最轻量级容器
- Opensource Circle: Docker和LXC的本质区别
- Angular4关于一个组件获取另一个组件中的变量的另外一种方式
- UIWebView 与JS交互,JSContext注入时机
- Jake Edge: 用systemd-nspawn创建容器
- Java版阿里云通信短信发送API接口实例(新)
- Java 生成可直接下载的二维码(spring boot)
- query子句解析
- 阿里巴巴牵手福特 共同打造智联网汽车
- java实现邮件发送
- 环信3.0添加聊天表情包