本篇文章给大家介绍一下angular中父组件和子组件相互传参的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
【相关教程推荐：《angular教程》】
一 ：父组件获取子组件的数据和方法
也就是说 子组件给父组件传数据和方法
通过ViewChild
演示例子：
父组件：news
子组件：header
假如子组件header有个run方法
run(){ console.log(‘我是header里面的run方法’); }
登录后复制
在父组件调用子组件header的run方法
1、在父组件中调用子组件，并给子组件定义一个名称
登录后复制
2、在父组件引入ViewChild
import { Component,OnInit ,ViewChild} from ‘@angular/core’;
登录后复制
3、利用属性装饰器ViewChild 和刚才的子组件关联起来
@ViewChild(‘header’) Header:any;
登录后复制
4、调用子组件的方法
getChildRun(){ this.Header.run(); }
登录后复制
二：父组件给子组件传值-@input
演示例子：
父组件：home
子组件：header
父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件
所以在子组件中可以调用 父组件的方法
1、父组件调用子组件的时候传入数据
登录后复制
2、子组件引入 Input 模块
import { Component, OnInit ,Input } from ‘@angular/core’;
登录后复制
3、子组件中 @Input 接收父组件传过来的数据
export class HeaderComponent implements OnInit { @Input() title:string constructor() { } ngOnInit() {}}
登录后复制
4、子组件中使用父组件的数据
这是头部组件– {{title}}
5、子组件中使用父组件的方法
总结：
父传子： @input
子传父：ViewChild
三、子组件通过@Output触发父组件的方法
演示例子：
父组件：news
子组件：footer
1、子组件引入 Output 和 EventEmitter
import { Component, OnInit ,Input,Output,EventEmitter} from ‘@angular/core’;
登录后复制
2、子组件中实例化 EventEmitter
@Output()
private outer=new EventEmitter();
/用 EventEmitter 和 output 装饰器配合使用 指定类型变量/
3、子组件通过 EventEmitter 对象 outer 实例广播数据
sendParent(){ this.outer.emit(‘msg from child’) }
登录后复制
4、父组件调用子组件的时候，定义接收事件 ,outer 就是子组件的 EventEmitter 对象 outer
文件：componentsewsews.component.html
登录后复制登录后复制
5、父组件接收到数据会调用自己的 getFooterRun 方法，这个时候就能拿到子组件的数
文件：componentsewsews.component.ts
//接收子组件传递过来的数据 getFooterRun(data){ console.log(data); }
登录后复制
五、非父子组件通讯
1、公共的服务
2、Localstorage(推荐)
3、Cookie
总结：
vue中 关于$emit的用法
1、父组件可以使用属性把数据传给子组件，子组件通过props接受。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；
登录后复制
angular中 关于emit的用法
1、父组件可以使用属性把数据传给子组件,子组件通过@input接受。
2、子组件可以使用 Output 和 EventEmitter 触发父组件的自定义事件。
父组件
登录后复制登录后复制
子组件
@Output() private event=new EventEmitter();/*用 EventEmitter 和 output 装饰器配合使用 指定类型变量*/sendParent(){ // outer 相当于是事件名称 this.event.emit(data) }
登录后复制
登录后复制
更多编程相关知识，请访问：编程视频！！
以上就是浅谈Angular中父子组件间相互传参的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2712563.html
