Angular父子组件通信

父传子

1.使用@input方式传值

@Input('xxx') 可以接收一个参数用于父组件传值时 [ ] 的名称
1. 在子组件的component.ts中导入Input并声明该变量
1.1 `import {Input} from '@angular/core`
1.2 在构造函数中 @Input() xxx:any;  //any可以换成别的类型
	
2. 在父组件中使用子组件时 如 <app-son [xxx]='fatherData'></app-son>  
	其中app-son是子组件 fatherData是父组件components中的变量 
		
3. xxx使用和子组件中变量的使用没什么区别

2.使用inputs方式传值

1.在子组件component.ts中
@component({
	inputs:['xxx']    //input是用来接收父组件传递的值
})
2.父组件使用子组件时 <app-son [xxx]='fatherData'></app-son>
fatherData是父组件中的变量 不能直接写字符串
3. this.xxx即可正常使用

子传父

1.使用ViewChild

1. 给子组件添加标记
<app-son #son></app-son>
2. 导入ViewChild
import { ViewChild } from '@angular/core';
3. @ViewChild('son',{static:true}) son:any;