真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

<strike id="e6kea"></strike>

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

 
  父組件
 

 
  子組件
 
 
  子組件
  
   子組件輸入：
   
   子組件輸出：
   
  
  Output方式
 

效果如下：（1、父組件輸入，子組件可同步輸出；2、子組件輸入需要（3、）點(diǎn)擊按鈕觸發(fā)發(fā)射事件，將數(shù)據(jù)傳送給父組件。）

@Input:父組件輸入的同時(shí)，子組件能同步獲取數(shù)據(jù)進(jìn)行顯示。核心代碼如下：

//父組件
parentPrint: any;      //ts中，聲明一個(gè)變量
[(ngModel)]="parentPrint"  //html中，綁定變量，獲取用戶輸入
//html中，將數(shù)據(jù)傳給子組件
 
//子組件
@Input() fromParent;    //ts中，用于直接接收從父組件獲取的數(shù)據(jù)
[(ngModel)]="fromParent"  //html中，用于顯示數(shù)據(jù)

通過(guò)setter截聽(tīng)輸入屬性值的變化，在子組件中聲明一個(gè)私有變量來(lái)獲取父組件傳遞過(guò)來(lái)的數(shù)據(jù)，從而屏蔽上層獲取下層信息。（簡(jiǎn)單一點(diǎn)就是不讓父組件知道子組件用什么東西去接收傳過(guò)來(lái)的數(shù)據(jù)）通過(guò)這種方法也可以獲得同樣的效果。

//子組件
 private _fromParent: any;   //私有變量，通過(guò)setter獲取父組件的數(shù)據(jù)
@Input()            //通過(guò)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(); //暴露一個(gè)輸出屬性

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

//父組件
[(ngModel)]="contentFromChild" //綁定輸出子組件的數(shù)據(jù)
//使用子組件，綁定事件屬性

//事件處理函數(shù)
 fromChild(event) {
  console.log(event);
  this.contentFromChild = event;
 }

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

如果父組件的類需要讀取子組件的屬性和值或調(diào)用子組件的方法時(shí)，就可以把子組件作為ViewChild，注入到父組件里面。ViewChild顧名思義就是可以看見(jiàn)子組件里面的屬性和方法。

 
  父組件
 
 
  父組件
  
   ViewChild父組件輸出：
   
  
  ViewChild方式
 

 
  子組件
 
 
  子組件
  
   子組件輸入：
   
  
 

效果如下：

父組件核心代碼：

//ts
@ViewChild(ChildComponent)         // 使用viewChild導(dǎo)入引用
private childComponent: ChildComponent;   // 將子組件注入到私有屬性
//獲取子組件數(shù)據(jù)并顯示
clickView() {
  //直接獲取子組件的屬性
  this.viewOutput = this.childComponent.contentFromChild;
 }

//html
[(ngModel)]="viewOutput"
 ViewChild方式

父組件和子組件通過(guò)服務(wù)來(lái)通訊

父組件和它的子組件共享同一個(gè)服務(wù)，利用該服務(wù)在家庭內(nèi)部實(shí)現(xiàn)雙向通訊。

 
  父組件
 
 
  父組件
  
   父組件服務(wù)輸入：
   
  
  Service方式
 

 
  子組件
 
 
  子組件
  
   子組件服務(wù)輸入：
   
  
  Service方式
 

//服務(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();
 constructor() {}
 // 獲取訂閱者
 public getObservable(): Observable {
  return this.subject.asObservable();
 }
 // 推送信息
 public push(msg: MeditorMsg) {
  this.subject.next(msg);
 }
}
// 中間者信息
export interface MeditorMsg {
 id: string;
 body: any;
}

效果如下：

父子組件的核心代碼類似，在構(gòu)造函數(shù)中將該服務(wù)實(shí)例注入到自身，父子組件都有一個(gè)唯一的id。無(wú)論是父組件還是子組件調(diào)用push()方法推送數(shù)據(jù)，雙方都能接收到數(shù)據(jù)，這時(shí)候就要根據(jù)id來(lái)判斷是要父組件使用數(shù)據(jù)還是子組件使用數(shù)據(jù)。核心代碼如下：

subscription: Subscription = null; //初始化一個(gè)訂閱對(duì)象
//子組件構(gòu)造函數(shù)，用于監(jiān)聽(tīng)數(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)聽(tīng)數(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});
 }

我上面寫(xiě)的還不是很完善，就是在生命周期結(jié)束前，也就是在onDestroy周期中，要取消訂閱。

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

上述就是小編為大家分享的怎么在Angular2中實(shí)現(xiàn)父子組件的通信了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。