Angular中父子组件传值@Input @Output @ViewChild最全面最简单的总结

原文出处：https://blog.youkuaiyun.com/xfwdxt/article/details/82111016 

个人总结：
@Input   - 子组件定义接受父组传入数据或方法的变量;
@Output - 子组件定义接受父组传入方法的变量; 
@ViewChild - 父组件定义子组件实例引用的变量；
 

父组件传递给子组件：

值传递方式：@Input既可以传递数据也可以传递方法

@Input传递数据（参考：父子组件传值@Input @Output @ViewChild）
1.子组件定义接受数据的变量(msg)

//子组件引入 Input 模块 
import { Component, OnInit ,Input } from '@angular/core';

export class HeaderComponent implements OnInit { 

    @Input() msg: string;    // 接受数据的变量

    constructor() { }

    ngOnInit() {}
}

2.子组件的模板绑定变量(msg)

<h2>这是头部组件--{{msg}}</h2>

3.父组件调用子组件的时候传入数据

<app-header [msg]="msg"></app-header>

 如果想监控父组件传给子组件数据的变化可以在子组件用ngOnChanges方法实现
详见：《ngular2父子组件之间数据传递：@Input和@Output (上)》

 

@Input传递方法

// 父组件定义方法
parentRun(){    
    alert('这是父组件的 run 方法');
}

调用子组件时传入当前方法（是传递方法不是调用方法）

<app-header [msg]="msg" [run]="parentRun"></app-header>

子组件接收和使用父组件传过来的方法

import { Component, OnInit ,Input } from '@angular/core';
 
export class HeaderComponent implements OnInit {   
    @Input() msg:string 
    @Input() run:any; // 接收父组件传递过来的方法parentRun
    
    constructor() { }  

    ngOnInit() {
        this.run(); // 子组件调用父组件的parentRun方法
    } 
}

子组件传递给父组件：

1、事件传递方式：@Output + EventEmitter事件传递的方式

子组件实例化装饰器修饰的EventEmitter实例，并在需要的时候发出传递事件的信号（可以传参）

import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core'; 

export class HeaderComponent implements OnInit {     
    // 用EventEmitter和Output装饰器配合使用，<string>指定广播传递的参数类型变量    
    @Output() private outer = new EventEmitter<string>();         

    sendParent(){        
        this.outer.emit('msg from child'); // 广播传递数据给父组件    
    } 
}

父组件调用子组件的时候，定义接收事件 , outer就是子组件的EventEmitter对象outer

<!--一旦接收到子组件发出的事件传递信号后就会执行父组件中定义好的接收方法-->
<app-header (outer)="runParent($event)"></app-header>   

// 接收子组件传递过来的数据 
runParent(msg:string){    
    alert(msg); 
}

2、主动获取：父组件通过局部变量获取子组件的引用，主动获取子组件的数据和方法

子组件定义如下：

export class FooterComponent implements OnInit { 
    public msg:string;    
    public msg: string;     
    
    constructor() { }         

    ngOnInit() {}      

    footerRun(){        
        alert('这是footer子组件的Run方法');    
    }
}

父组件调用子组件的时候给子组件取个id标识（即模板变量#footer)

<app-footer #footer></app-footer>

2.1、可在页面上直接获取执行子组件的方法(footer.footerRun)

<button (click)='footer.footerRun()'>获取子组件的数据</button>

2.2、在控制器controller中通过@ViewChild，引入模板变量#footer

import { Component, OnInit ,ViewChild} from '@angular/core';     

@ViewChild('footer') footerChild; // 在父组件的控制器中引用子组件     

run(){        
    this.footerChild.footerRun(); // 在父组件的控制器中调用子组件的方法或变量    
}