本篇文章给大家介绍一下angular中父子组件相互传参的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关推荐：《angular教程》
一 ：父组件获取子组件的数据和方法也就是说 子组件给父组件传数据和方法
通过viewchild
演示例子：
父组件：news
子组件：header
假如子组件header有个run方法
run(){ console.log(‘我是header里面的run方法’); }
在父组件调用子组件header的run方法
1、在父组件中调用子组件，并给子组件定义一个名称
<app-header #header></app-header>
2、在父组件引入viewchild
import { component,oninit ,viewchild} from ‘@angular/core’;
3、利用属性装饰器viewchild 和刚才的子组件关联起来
@viewchild(‘header’)header:any;
4、调用子组件的方法
getchildrun(){this.header.run();}
二：父组件给子组件传值-@input演示例子：
父组件：home
子组件：header
父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件
所以在子组件中可以调用 父组件的方法
1、父组件调用子组件的时候传入数据
<app-header [title]="title" [homework]="homework" [homepage]='this'></app-header>
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
文件：components\news\news.component.html
<app-footer (outer)=“getfooterrun(data)”>
5、父组件接收到数据会调用自己的 getfooterrun 方法，这个时候就能拿到子组件的数
文件：components\news\news.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 触发父组件的自定义事件。
父组件
<app-footer (event)=“getfooterrun(data)”>
子组件
@output() private event=new eventemitter<string>();/*用 eventemitter 和 output 装饰器配合使用 <string>指定类型变量*/sendparent(){ // outer 相当于是事件名称 this.event.emit(data) }
<button (event)=“sendparent()”>通过@output给父组件广播数据
更多编程相关知识，请访问：编程视频！！
以上就是浅谈angular中父子组件相互传参的方法的详细内容。