Angular父子组件通信

一、父--->子传参

父组件：

1）在子组件标签内：

        <son [data]=resciveData></son> 将父组件的resciveData传递给子组件，子组件通过data接收

子组件：

1）ts文件中：

        import { Input } from '@angular/core'

        在export里加上 @Input() data: dataType(number/string/boolean/null/object/any)

2）html文件里：

        通过data可以拿到数据

二、子---->父传参

子组件：

1）ts文件中：

        import { Output, EventEmitter } from 'angular/core';

        export中：@Output() private childOuter = new EventEmitter();

        //@Output() childOuter = EventEmitter<void> = new EventEmitter<void>();

        事件内：this.childOuter.emit(msg) [msg为要传的东西]

父组件：

1）html文件中：

        在子组件标签内<son (childOuter)="eventName($event)"></son>

2）ts文件中：

        eventName(msg){ console.log(msg) } //拿到msg

三、父组件主动获取子组件属性/方法

父组件：

1）html文件中

        <son #tagson></son>

2）ts文件中：

        import { ViewChild } from '@angular/core'

        export中：@ViewChild('tagson') tagson

        事件内：通过 this.tagson.属性/this.tagson.方法() 就可以