``` 組件交互，也就是讓兩個或多個組件之間共享信息的方法。 ``` ## 一、父組件向子組件傳遞數據。 >[info] 父組件通常使用屬性型指令向子組件傳遞數據，子組件中需要引入Input模塊，并定義屬性用于接受傳遞的數據 1.子組件中 ``` import { Component, OnInit,Input } from '@angular/core'; //引入Input模塊接受父組件傳遞的數據 @Input() name:string; //定義接受數據的變量 ``` 2.父組件中 ``` //父組件通過屬性型綁定傳遞數據 [name] = "數據",[name] 是子組件中定義的接受數據的變量 <app-child [name]='"父組件的數據"'></app-child> ``` ## 二、父組件監聽子組件的事件。 >[info] 使用EventEmitter實現自定義事件(子組件向父組件發射事件) 使用EventEmitter?來觸發自定義事件，用于父子組件交互 1.子組件引入`EventEmitter`模塊和`Onput`模塊，`Onput`模塊用于把`EventEmitter`的實例暴露出去 ``` import {Component,OnInit,EventEmitter,Output}from '@angular/core'; //引入EventEmitter模塊,通過EventEmitter實現自定義事件 @Component({ selector: 'app-child', template: `<button (click)='clickfn()'>點擊我觸發自定義事件</button>` styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit{ data: object = { 'msg': '測試', 'code': 1 }; //創建自定義事件對象 @Output() deleteRequest = new EventEmitter(); clickfn() { //觸發自定義事件,并傳遞一些參數 this.deleteRequest.emit(this.data); } } ``` 2.父組件監聽子組件的自定義事件，并綁定事件處理函數。 ``` // 監聽子組件的自定義事件,并綁定事件處理函數 通過$event接受傳遞的參數 import { Component,OnInit,OnInit,ViewChild } from '@angular/core'; @Component({ selector: 'app-child', template: `<app-child (deleteRequest)='fn($event)'></app-child>` styleUrls: ['./child.component.css'] }) export class ParentComponent implements OnInit{ fn(data):void{ console.log(data) } } ``` ## 三、使用模板引用變量交互。 >[info] 在父組件模板里，使用模板引用變量代表子組件，利用引用變量讀取子組件的屬性和方法。 ``` // #child 使用模板引用變量代表子組件,可利于引用變量讀取子組件的數據和調用子組件的方法 <app-child #child></app-child> // 通過模板引用變量讀取子組件的數據 {{child.childData}} // 通過模板引用變量調用子組件的方法 <button (click)="child.childfn()">調用子組件的方法</button> ``` ## 四、父組件調用@ViewChild()。 >[info] 當父組件類內部需要這種訪問子組件的屬性和方法時，可以把子組件作為?ViewChild，注入到父組件里面。 ``` import { Component, OnInit,ViewChild } from '@angular/core'; //引入ViewChild模塊 //定義子組件 ViewChild的參數是子組件本身,可使用模板引用變量代表子組件，或者引入子組件,傳入子組件 @ViewChild("child") child; export class ParentComponent implements OnInit{ clickfn(){ console.log(this.child);//獲取子組件 } } ``` ## 五、父組件和子組件通過服務來通訊 通過服務進行通訊本質是使用Rxjs存儲數據，然后在組件中做數據共享。