Angular-7-组件传值

1.父传子：@input

父组件中：
1.ts文件中先声明father
2.<子组件 [sonVar]="father"></子组件>

子组件中：
1.ts文件用 @input进行接收
@input()
sonVar?:stirng
2.<div>{{sonVar}}</div>

2.子传父：@output

基本流程：子组件中假如有一个button，点击按钮传递一个a到父组件

1.子组件ts文件中引入OutPut和EventEmitter from ‘@angular/core’

2.子组件中实例化一个EventEmitter的对象，用它来代替事件类型：@OutPut() addA = new EventEmitter()

3.button声明一个点击事件（click）=“btnFun”，触发这个事件之后，

btnFun（）{ this.addA.emit('a') },执行addA事件

4.父组件中：

<子组件 (addA)="getA('$event')"></子组件>,用父组件声明的方法getA接收传参a，$event接收。

name:string = ' '

getA(A:string){

name = A//使用接收到的参数

}

<div>{{name}}</div>//页面中也会在点击按钮传递参数后把接收的参数渲染上去