• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

Angularjs2不同组件间的通信实例代码

angularjs 搞代码 4年前 (2021-12-31) 31次浏览 已收录 0个评论

AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨来源gaodai#ma#com搞@@代~&码网模块的组件也可以实现传值

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; } }

思路:定义一个服务作为传递参数的媒介注入在要传参的组件的构造器里面,然后对服务里面属性(传参媒介)来赋值和取值实现组件之间的传参。

以上所述是小编给大家介绍的Angularjs2不同组件间的通信实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

以上就是Angularjs2不同组件间的通信实例代码的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Angularjs2不同组件间的通信实例代码
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址