Angular2 父子組件通信方式

  • Angular2官方文檔對組件交互這塊有詳細(xì)的介紹-->文檔--組件之間的交互。按文檔介紹，組件間交互的方式一共有4種，包括：
  1. 通過輸入型綁定把數(shù)據(jù)從父組件傳到子組件（@Input decoration）；子組件暴露一個(gè)EventEmitter屬性（@Output decoration），當(dāng)事件發(fā)生時(shí)，利用該屬性emits向父組件發(fā)射事件。
  2. 父組件與子組件通過本地變量互動。（# var）
  3. 父組件調(diào)用@ViewChild。
  4. 父組件和子組件通過服務(wù)來通訊。
  • 我在這里只總結(jié)、詳細(xì)介紹3種我在項(xiàng)目中使用過的方法，看完本文大概能做到如下的效果：
image.png
  • 創(chuàng)建項(xiàng)目，項(xiàng)目結(jié)構(gòu)如下：
image.png

通過@Input、@Output裝飾器進(jìn)行父、子組件間的通信

  • @Input：該屬性綁定用于父組件向子組件傳遞數(shù)據(jù)。子組件可以通過以下兩種方法截取屬性的變更：
    • 使用一個(gè)輸入屬性的setter，以攔截父組件中值得變化。
    • 通過ngOnchanges()來截聽輸入屬性值的變化。
  • @Output：該數(shù)據(jù)綁定用于子組件向父組件傳遞數(shù)據(jù)和事件。
<!--parent.component.html-->
<div style="width: 1000px;margin: auto">
<div class="card" style="width: 500px;float: left">
  <div class="card-header">
    父組件
  </div>
  <div class="card-body">
    <h5 class="card-title">父組件</h5>
    <div class="form-group">
      <label for="input">父組件輸入：</label>
      <input type="text"
             class="form-control"
             id="input"
             placeholder="Input something"
             [(ngModel)]="parentPrint"  
      >
      <label for="output">父組件輸出：</label>
      <input type="text"
             class="form-control"
             id="output"
             placeholder="Output something"
             [(ngModel)]="contentFromChild"
      >
    </div>
  </div>
</div>
<app-child
  [fromParent]="parentPrint"
  (fromChild)="fromChild($event)"
></app-child>
</div>


<!--child.component.html-->
<div class="card" style="width: 500px;">
  <div class="card-header">
    子組件
  </div>
  <div class="card-body">
    <h5 class="card-title">子組件</h5>
    <div class="form-group">
      <label for="input">子組件輸入：</label>
      <input type="text"
             class="form-control"
             id="input"
             placeholder="Input something"
             [(ngModel)]="contentFromChild"
      >
      <label for="output">子組件輸出：</label>
      <input type="text"
             class="form-control"
             id="output"
             placeholder="Output something"
             [(ngModel)]="fromParent"
      >
    </div>
    <button  class="btn btn-primary" (click)="clickChild()">Output方式</button>
  </div>
</div>
  • 效果如下：（1、父組件輸入，子組件可同步輸出；2、子組件輸入需要（3、）點(diǎn)擊按鈕觸發(fā)發(fā)射事件，將數(shù)據(jù)傳送給父組件。）
image.png
  • @Input:父組件輸入的同時(shí)，子組件能同步獲取數(shù)據(jù)進(jìn)行顯示。核心代碼如下：
//父組件
parentPrint: any;           //ts中，聲明一個(gè)變量
[(ngModel)]="parentPrint"   //html中，綁定變量，獲取用戶輸入
//html中，將數(shù)據(jù)傳給子組件
<app-child [fromParent]="parentPrint"></app-child> 
//子組件
@Input() fromParent;        //ts中，用于直接接收從父組件獲取的數(shù)據(jù)
[(ngModel)]="fromParent"    //html中，用于顯示數(shù)據(jù)
  • 通過setter截聽輸入屬性值的變化，在子組件中聲明一個(gè)私有變量來獲取父組件傳遞過來的數(shù)據(jù)，從而屏蔽上層獲取下層信息。（簡單一點(diǎn)就是不讓父組件知道子組件用什么東西去接收傳過來的數(shù)據(jù)）通過這種方法也可以獲得同樣的效果。
//子組件
 private _fromParent: any;      //私有變量，通過setter獲取父組件的數(shù)據(jù)
@Input()                        //通過setter獲取父組件的數(shù)據(jù)
  set fromParent(fromParent: any) {
    this._fromParent = fromParent;
  }
  get fromParent(): any {
    return this._fromParent;
  }
  • @Output:父組件接收子組件的數(shù)據(jù)時(shí)，子組件暴露一個(gè)EventEmitter屬性，當(dāng)事件發(fā)生時(shí)，子組件利用該屬性emits(向上彈射)事件。父組件綁定到這個(gè)事件屬性，并在事件發(fā)生時(shí)作出回應(yīng)。核心代碼如下：
//子組件
@Output() fromChild = new EventEmitter<any>();  //暴露一個(gè)輸出屬性

<button  class="btn btn-primary" (click)="clickChild()">Output方式</button> 
 //觸發(fā)發(fā)射函數(shù)，將數(shù)據(jù)發(fā)送給父組件
  clickChild() {
    console.log('click child' , this.contentFromChild);
    this.fromChild.emit(this.contentFromChild);
  }


//父組件
[(ngModel)]="contentFromChild"  //綁定輸出子組件的數(shù)據(jù)
//使用子組件，綁定事件屬性
<app-child
  [fromParent]="parentPrint"
  (fromChild)="fromChild($event)"
></app-child>
//事件處理函數(shù)
 fromChild(event) {
   console.log(event);
   this.contentFromChild = event;
 }

父組件通過調(diào)用@ViewChild()來獲取子組件的數(shù)據(jù)

  • 如果父組件的類需要讀取子組件的屬性和值或調(diào)用子組件的方法時(shí)，就可以把子組件作為ViewChild，注入到父組件里面。ViewChild顧名思義就是可以看見子組件里面的屬性和方法。
<!--parent.component.html-->
<div style="width: 1000px;margin: auto">
<div class="card" style="width: 500px;float: left">
  <div class="card-header">
    父組件
  </div>
  <div class="card-body">
    <h5 class="card-title">父組件</h5>
    <div class="form-group">
      <label for="viewoutput">ViewChild父組件輸出：</label>
      <input type="text"
             class="form-control"
             id="viewoutput"
             placeholder="ViewChild父組件輸出"
             [(ngModel)]="viewOutput"
      >
    </div>
    <button class="btn btn-primary" (click)="clickView()">ViewChild方式</button>
  </div>
</div>
<app-child></app-child>
</div>

<!--child.component.html-->
<div class="card" style="width: 500px;">
  <div class="card-header">
    子組件
  </div>
  <div class="card-body">
    <h5 class="card-title">子組件</h5>
    <div class="form-group">
      <label for="input">子組件輸入：</label>
      <input type="text"
             class="form-control"
             id="input"
             placeholder="Input something"
             [(ngModel)]="contentFromChild"
      >
    </div>
  </div>
</div>
  • 效果如下：
image.png
  • 父組件核心代碼：
//ts
@ViewChild(ChildComponent)                  // 使用viewChild導(dǎo)入引用
private childComponent: ChildComponent;     // 將子組件注入到私有屬性
//獲取子組件數(shù)據(jù)并顯示
clickView() {
    //直接獲取子組件的屬性
    this.viewOutput = this.childComponent.contentFromChild;
  }

//html
[(ngModel)]="viewOutput"
 <button class="btn btn-primary" (click)="clickView()">ViewChild方式</button>

父組件和子組件通過服務(wù)來通訊

  • 父組件和它的子組件共享同一個(gè)服務(wù)，利用該服務(wù)在家庭內(nèi)部實(shí)現(xiàn)雙向通訊。
<!--parent.component.html-->
<div style="width: 1000px;margin: auto">
<div class="card" style="width: 500px;float: left">
  <div class="card-header">
    父組件
  </div>
  <div class="card-body">
    <h5 class="card-title">父組件</h5>
    <div class="form-group">
      <label for="serviceoutput">父組件服務(wù)輸入：</label>
      <input type="text"
             class="form-control"
             id="serviceoutput"
             placeholder="服務(wù)輸入"
             [(ngModel)]="serviceInput"
      >
    </div>
    <button class="btn btn-primary" (click)="clickService()">Service方式</button>
  </div>
</div>
<app-child></app-child>
</div>


<!--child.component.html-->
<div class="card" style="width: 500px;">
  <div class="card-header">
    子組件
  </div>
  <div class="card-body">
    <h5 class="card-title">子組件</h5>
    <div class="form-group">
      <label for="serviceoutput">子組件服務(wù)輸入：</label>
      <input type="text"
             class="form-control"
             id="serviceoutput"
             placeholder="服務(wù)輸入"
             [(ngModel)]="serviceInput"
      >
    </div>
    <button class="btn btn-primary" (click)="clickService()">Service方式</button>
  </div>
</div>


//服務(wù)
//meditor.service.ts
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class MeditorService {
  private subject = new Subject<MeditorMsg>();
  constructor() {}
  // 獲取訂閱者
  public getObservable(): Observable<MeditorMsg> {
    return this.subject.asObservable();
  }
  // 推送信息
  public push(msg: MeditorMsg) {
    this.subject.next(msg);
  }
}
// 中間者信息
export interface MeditorMsg {
  id: string;
  body: any;
}
  • 效果如下：
image.png

  • 父子組件的核心代碼類似，在構(gòu)造函數(shù)中將該服務(wù)實(shí)例注入到自身，父子組件都有一個(gè)唯一的id。無論是父組件還是子組件調(diào)用push()方法推送數(shù)據(jù)，雙方都能接收到數(shù)據(jù)，這時(shí)候就要根據(jù)id來判斷是要父組件使用數(shù)據(jù)還是子組件使用數(shù)據(jù)。核心代碼如下：
subscription: Subscription = null;  //初始化一個(gè)訂閱對象
//子組件構(gòu)造函數(shù)，用于監(jiān)聽數(shù)據(jù)推送
constructor(
    private meditor: MeditorService
  ) {
    this.subscription = meditor.getObservable().subscribe(
      msg => {
        console.log(msg);
        if (msg.id === 'parent') {      //id為parent，獲取父組件數(shù)據(jù)
          this.serviceInput = msg.body;
        }
      }
    );
  }
// 子組件將數(shù)據(jù)推送到中間著，給訂閱者
clickService() {
    this.meditor.push({id: 'parent', body: this.serviceInput});
  }
//父組件構(gòu)造函數(shù)，用于監(jiān)聽數(shù)據(jù)推送
constructor(
    private meditor: MeditorService
  ) {
    this.subscription = meditor.getObservable().subscribe(
      msg => {
        console.log(msg);
        if (msg.id === 'child') {       //id為child，獲取子組件數(shù)據(jù)
          this.serviceInput = msg.body;
        }
      }
    );
  }
// 父組件將數(shù)據(jù)推送到中間著，給訂閱者
clickService() {
    this.meditor.push({id: 'parent', body: this.serviceInput});
  }
  • 我上面寫的還不是很完善，就是在生命周期結(jié)束前，也就是在onDestroy周期中，要取消訂閱。

? 以上，就是最近在使用的組件交互的總結(jié)。個(gè)人覺得通過服務(wù)來交互的可擴(kuò)展性更強(qiáng)。例如，我們項(xiàng)目中用到了一個(gè)動態(tài)顯示的側(cè)欄，不同時(shí)期點(diǎn)擊顯示側(cè)欄要顯示不同的東西。這個(gè)時(shí)候把側(cè)欄作為父組件，子組件作為消息的一部分傳遞給父組件，父組件根據(jù)子組件名動態(tài)生成模板，顯示在側(cè)欄上面。說了這么多廢話大概就是下圖的意思：

image.png

最后附上demo源碼：父子組件交互demo

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,506評論 19贊 139
  • 組件基礎(chǔ) 組件用來包裝特定的功能，應(yīng)用程序的有序運(yùn)行依賴于組件之間的協(xié)同工作。組件是angular應(yīng)用的最小邏輯單...
    oWSQo閱讀 1,446評論 0贊 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,794評論 25贊 709
  • 課文 Most of us have formed an unrealistic picture of life ...
    claresun閱讀 345評論 0贊 0
  • 2017年就要結(jié)束了，進(jìn)行一個(gè)簡單的總結(jié)，并對新的即將到來的2018年做一下展望。 現(xiàn)在已經(jīng)完全想不起來當(dāng)時(shí)過年時(shí)...
    龍貓不是貓吧閱讀 318評論 0贊 0

友情鏈接更多精彩內(nèi)容