Angular父子组件传值及方法调用

Angular 父子组件传值及方法调用

1.子组件接收父组件的数据及调用父组件的方法

方法1：通过Input接收父组件的数据或方法
（1）在子组件中导入Input：
import { Input } from ‘@angular/core’;
（2）子组件类中通过@Input装饰器接受输入数据或方法，并赋值给子组件的属性
（3）子组件引用是通过属性传值，属性名要和组件类中的属性名一致
（4）通过步骤（2）中的属性，即可获得父组件传递的数据或通过属性名+()即可调用父组件的方法

方法2：通过Input接收父组件，直接调用父组件的属性及方法
这个方法和方法1类似，区别是：在引用子组件是，把父组件通过"this"关键字整个传递给子组件，在子组件中就可以直接调用父组件的属性和方法。

2.父组件接收子组件的数据及调用子组件的方法

方法1：通过ViewChild获取子组件，直接调用子组件的数据及方法
（1）子组件引用是给子组件新增ID属性:#idName
（2）父组件类中引入ViewChild：import { ViewChild } from ‘@angular/core’;
（3）父组件勒种通过@ViewChild(‘idName’)装饰器接受子组件并赋值给自己的属性
（4）通过（3）中获取的属性获取子组件的数据或调用子组件的方法

方法2：dom加载完成后，通过document.elementById获取子组件，获取子组件的数据、调用子组件的方法
（1）父组件类需要在ngAfterViewInit()方法中，通过document.getElementById(‘idName’)获取子组件
（2）调用子组件的属性和方法

方法3：子组件通过EventEmitter发射数据，父组件通过()和$event接收子组件发射的数据

（1）子组件中导入EventEmitter、Output：import { EventEmitter ,Output } from ‘@angular/core’;
（2）子组件中定义属性为输出类型，并设置为EventEmitter类型：@Output() private out = new EventEmitter();
（3）输出属性通过emit()方法发射数据：this.out.emit(‘msg’);
（4）子组件调用中接收子组件发射的数据，并传递通过$event传递给父组件的方法：(out)=“fatherMethod($event)”

示例代码： 代码