父元件傳遞給子元件：

值傳遞方式：@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，引入為成員變數

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

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

run(){        
    this.footerChild.footerRun(); // 在父元件的控制器中呼叫子元件的方法或變數    
}