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

约定不等于承诺〃 2022-05-07 08:16 198阅读 0赞

原文出处：[https://blog.csdn.net/xfwdxt/article/details/82111016][https_blog.csdn.net_xfwdxt_article_details_82111016]   
  
个人总结：  
@Input   - 子组件定义接受父组传入数据或方法的变量;  
@Output - 子组件定义接受父组传入方法的变量;   
@ViewChild - 父组件定义子组件实例引用的变量；

## 父组件传递给子组件： ##

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

@Input传递数据（参考：[父子组件传值@Input @Output @ViewChild][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 (上)][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(); // 在父组件的控制器中调用子组件的方法或变量    
    }

[https_blog.csdn.net_xfwdxt_article_details_82111016]: https://blog.csdn.net/xfwdxt/article/details/82111016
[Input _Output _ViewChild]: https://www.jianshu.com/p/b2d9164c06e5
[ngular2_Input_Output]: https://blog.csdn.net/long328583644/article/details/74894005