2. 程式人生 > >Angular組件之間的交互

Angular組件之間的交互

阿新 • • 發佈：2017-10-06
構造 函數 而是 過程 class a appdata 事件 row 發生

Angular組件之間的交互分為：

1.通過輸入型綁定把數據從父組件傳到子組件。

2.通過setter截聽輸入屬性值的變化

3.通過ngOnChanges()來截聽輸入屬性值的變化

4.父組件監聽子組件的事件

5.父組件與子組件通過本地變量互動

6.父組件調用@ViewChild()

7.父組件和子組件通過服務來通訊

這些在Angular的中文官方文檔都有，類似的博客一大堆，寫這篇博客的目的不是說把人家做過的東西再做一遍，而是把人家做過的東西轉化成自己的東西，這樣才是有用的。

在博客正式開始之前我們先介紹一下項目目錄

----------app.component.ts

----------app.component.html

----------app.component.css

----------app.module.ts

----------child(文件夾)

--------------child.component.ts

--------------child.component.html

--------------child.component.css

一、通過輸入型綁定把數據從父組件傳到子組件

這個通訊方法的操作很簡單，父組件發送自己的數據給子組件，子組件接收父組件傳遞過來的數據。 1.app.component.html 
<child [childData]="appData"></
 
child><!--childData是子組件的接收參數，appData是父組件傳遞的數據，整個數據傳遞過程的重點，橋梁-->
2.app.component.ts 
import { Component } from ‘@angular/core‘;
import { ChildComponent } from ‘./child/child.component‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  title 
 
= ‘app‘;
  appData=[‘Apple‘,‘Banana‘,‘watermelon‘,‘pear‘];
}
3.child.component.ts 
import { Component,Input } from ‘@angular/core‘;//記得導入Input裝飾器

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent {
  title = ‘child‘;
  @Input() childData:any;//接收數據的接口
}
4.child.component.html 
<ul>
    <li *ngFor="let children of childData; let num1 = index">{{num1}}--{{children}}</li>
</ul>
<ul>
    <li *ngFor="let children of childData; index as num2">{{num2}}--{{children}}</li><!--index的第二種寫法-->
</ul>
我們第一個實驗將父組件的數組傳遞給子組件然後渲染出來，效果是這樣的

技術分享

二、通過setter截聽輸入屬性值的變化

這種交互方式的書寫格式有些不太符合我們平時的書寫規範 1.app.component.html 
<child *ngFor="let app of appData" [child]="app"></child>
2.app.component.ts 
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  title = ‘app‘;
  appData=[‘Apple‘,‘Banana‘,‘ ‘,‘pear‘]; //父組件數據
}
3.child.component.ts 
import { Component,Input } from ‘@angular/core‘;

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent {
  title = ‘child‘;
  private _name = ‘‘; //定義一個私有向量，來暫時儲存父組件傳遞過來的數據
  @Input() set child(name: string) { //child是我們用來接收父組件傳遞過來的數據的一個變量，我們用setter來截取到這個變量，然後做一些修改，child這個變量名
                                       //它是取決於父組件app.component.html裏面的[child]="app"，不能隨便改動，child的形參名字可以隨便修改
    this._name = name.trim() || ‘Oranges‘; //會trim掉名字裏的空格，並把空值替換成Oranges。
  }
 
  get child(): string{ //用get重新獲取重置過後的child變量，這個過程中_name這個是有變量就用到了
      return this._name;
  }
}
4.child.component.html 
<p>{{child}}</p>
我們第二個實驗的效果是這樣的 技術分享

三、通過ngOnChanges()來截聽輸入屬性值的變化

OnChanges是一個生命周期鉤子，一旦檢測到該組件(或指令)的輸入屬性發生了變化，Angular就會調用它的ngOnChanges()方法。 1.app.component.html 
<table>
    <tr>
        <td>ID</td>
        <td><input type="text" [(ngModel)]="id"/></td>
    </tr>
    <tr>
        <td>PassWord</td>
        <td><input type="text" [(ngModel)]="password"/></td> <!--使用ngModel要記住在app.module.ts裏面添加FormsModule-->
    </tr>
    <tr colspan="2">
        <td><button (click)="reset()">Reset Log</button></td>
    </tr>
</table>
<div>
    <child [id]="id" [password]="password"></child>
</div>
2.app.component.ts 
import { Component,ViewChild } from ‘@angular/core‘;//這裏使用了我們第六點將會用到的父組件調用@ViewChild()，第六點細講
import { ChildComponent } from ‘./child/child.component‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
    title = ‘app‘;
    id:number;
    password:number;
    @ViewChild(ChildComponent) childView: ChildComponent;//此處先忽略不看
    constructor() {
      this.reset();//構造函數，有初始化id和password的功能
    }

    reset() {
        this.id = 100001;
        this.password = 123456;
        if (this.childView) { 
            this.childView.reset(); 
        }
      }
}
3.child.component.ts 
import { Component, Input, OnChanges, SimpleChanges } from ‘@angular/core‘;

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent implements OnChanges {
  title = ‘child‘;
  @Input() id: number;
  @Input() password: number;
  changeLog: string[] = []; //這個數組用來存放修改日誌，修改一個input就會儲存相應的記錄
  ngOnChanges(changes: SimpleChanges) {
      for (let propName in changes) {
          let chng = changes[propName];
          let cur  = JSON.stringify(chng.currentValue);//修改前的數據
          let prev = JSON.stringify(chng.previousValue);//修改後的數據
          this.changeLog.push(`${propName}被修改了: 前一個數據 = ${cur}, 後一個數據 = ${prev}`);
        }
    }
    reset() { 
      this.changeLog.length = 0; //清除日誌
    }
}
4.child.component.html 
<div class="hero">
    <h4>-- Change Log --</h4>
    <div *ngFor="let chg of changeLog">{{chg}}</div> <!--將日誌一條一條打印出來-->
</div>
我們第三個實驗的效果是這樣的 技術分享

四、父組件監聽子組件的事件

通過@Output裝飾器自定義一個方法，在需要emits(向上彈射)的函數裏面彈射變量 1.app.component.html 
<p>{{title}}</p>
<child (onClick)="onCli($event)"></child> <!--onClick是子組件自定義的事件，觸發onClick事件，執行父組件的onCli()方法-->
2.app.component.ts 
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
    title="你還沒點擊按鈕";
    onCli(isClick: boolean) { //父組件的方法，更換title的值
        if(isClick){ //如果子組件彈射出來的變量為true
            this.title="你點擊了按鈕"; //那麽就更改title
        } 
      }
}
3.child.component.ts 
import { Component, EventEmitter, Output } from ‘@angular/core‘;//註意導入

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent{
  title = ‘child‘;
  @Output() onClick = new EventEmitter<boolean>();//暴露自定義事件onClick
  click(isClick: boolean) { //click()只是一個普通的方法
    this.onClick.emit(isClick);//向父組件彈射isClick變量，這個變量在button被點擊的時候觸發
  }
}
4.child.component.html 
<button (click)="click(true)">點擊</button> <!--給click方法傳入true-->
這種父子組件之間的通訊方式，需要註意以下幾點： 1.在子組件裏面定義並暴露出自定義事件； 2.在子組件裏面需要彈射的函數裏面彈射變量； 3.在父組件裏面通過$event接收變量。 我們第四個實驗的效果是這樣的 技術分享技術分享

五、父組件與子組件通過本地變量互動

這種通訊比較簡單，而且父組件可以同時調用子組件的變量或方法
1.app.component.html 
<p>{{title}}</p><!--調用父組件自己的變量-->
<p>{{data.title}}</p><!--調用子組件的變量-->
<child #data></child><!--在父組件模板裏，新建一個本地變量來代表子組件，然後利用這個變量來讀取子組件的屬性和調用子組件的方法-->
<button (click)="data.click()">點擊</button><!--調用子組件的方法-->

2.app.component.ts 
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
    title="app";//父組件的變量
}
3.child.component.ts 
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent{
  title = ‘child‘;//子組件的變量
  click(){//子組件的方法
      this.title="changeChild";
  }
}
child.component.html不用編寫代碼 我們第五個實驗的效果是這樣的 技術分享技術分享

六、父組件調用@ViewChild()

這種父子組件之間的通訊方式也很容易理解,項目代碼和第五個通訊方式差不多 1.app.component.html 
<p>{{title}}</p>
<p>{{data.title}}</p>
<child #data></child>
<button (click)="onclick()">點擊</button><!--註意這裏，跟第五個方法有些區別-->
2.app.component.ts 
import { Component } from ‘@angular/core‘;
import { ViewChild } from ‘@angular/core‘;
import { ChildComponent } from ‘./child/child.component‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
    title="app";
    @ViewChild(ChildComponent)//通過@ViewChild屬性裝飾器，將子組件CountdownTimerComponent註入到私有屬性timerComponent裏面，此處不能加分號。
    private child: ChildComponent;
    onclick(){
        this.child.click();
    }
}
3.child.component.ts 
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent{
  title = ‘child‘;
  click(){
      this.title="changeChild";
  }
}
child.component.html也是不用編寫代碼，我們第六個實驗的效果跟第五個是一樣的，這裏不再講述。

七、父組件和子組件通過服務來通訊

這種服務通訊方式我在一篇文章有詳細地解析過。這個實驗要在app.component.html加入新的文件Service.ts 1.app.component.html 
<p>{{title}}</p>
<button (click)="onclick()">點擊</button>
<child></child>
2.app.component.ts 
import { Component } from ‘@angular/core‘;
import { ChildComponent } from ‘./child/child.component‘;
import { Service } from ‘./Service‘;//導入服務

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
    title=‘app‘;
    constructor(public pService: Service) { //原來的寫法是這樣的pService = new Service();
     }
    onclick(){
        this.title = this.pService.getData();
        console.log(this.title);
    }
}
3.child.component.ts 
import { Component } from ‘@angular/core‘;
import { Service } from ‘../Service‘;

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent{
  title = ‘child‘;
  constructor(public pService: Service) {
    }
  onclick(){
    this.title = this.pService.getData();
  }
}
4.child.component.html 
<p>{{title}}</p>
<button (click)="onclick()">點擊</button>
app.component.html和child.component.html，app.component.ts和child.component.ts的代碼幾乎一樣，目的是要展示出服務在父子組件甚至任何組件裏面的使用 5.Service.ts 
import {Injectable} from "@angular/core"

@Injectable()
export class Service {
  title=‘service‘;//公共變量
  getData() {//公共方法
    return this.title;
  }
}
6.app.module.ts 
import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;

import { AppComponent } from ‘./app.component‘;
import { ChildComponent } from ‘./child/child.component‘;
import { Service } from ‘./Service‘;//導入服務

@NgModule({
  declarations: [
    AppComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Service],//註冊服務
  bootstrap: [AppComponent]
})
export class AppModule { }
實驗七的效果是這樣的，在點擊之前 技術分享 點擊之後 技術分享

八、結語

至此七種父子組件之間的交互方式解析完畢，大家在不同的代碼情況因地制宜，選擇最合適的方式！












Angular組件之間的交互

相關推薦

Angular組件之間的交互

構造 函數 而是 過程 class a appdata 事件 row 發生 Angular組件之間的交互分為： 1.通過輸入型綁定把數據從父組件傳到子組件。 2.通過setter截聽輸入屬性值的變化 3.通過ngOnChanges()來截聽輸入屬性值的變化 4.父組件監聽子

Angular開發實踐（四）：組件之間的交互

lec previous call 私有 判斷 處理方法 數組 依然 處理 在Angular應用開發中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。 根據數據的傳遞方向，分為父組件向子組件傳遞、子組件向父組件傳遞及通過

React 組件基本使用(3) ---父子組件之間的通信

pro hang lang component html 渲染 根據 狀態 傳遞數據 　　當有多個組件需要共享狀態的時候，這就需要把狀態放到這些組件共有的父組件中，相應地，這些組件就變成了子組件，從而涉及到父子組件之間的通信。父組件通過props 給子組件傳遞數據，子組件則

vue2.0組件之間的傳值--新入坑，請指教

fine ext sets mode tro exp ted pro -s prop down emit up 嘿嘿 如果是第一次接觸vue2.0組件傳值的肯定很疑惑，這是什麽意思（大神總結的，我也就是拿來用用） “down”—>指的是下的意思，即父

vue組件之間的通信以及如何在父組件中調用子組件的方法和屬性

拷貝 htm ps實現 lis html 區分大小寫 個數 但是 targe 在Vue中組件實例之間的作用域是孤立的，以為不能直接在子組件上引用父組件的數據，同時父組件也不能直接使用子組件的數據 一、父組件利用props往子組件傳輸數據 父組件： <div>

使用Broadcast實現android組件之間的通信

app filter -c main not 分享 err 之間 lte android組件之間的通信有多種實現方式。Broadcast就是當中一種。在activity和fragment之間的通信，broadcast用的很多其它本文以一個activity

vue.js 組件之間傳遞數據

js前言組件是 vue.js 最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。如何傳遞數據也成了組件的重要知識點之一。組件組件與組件之間，還存在著不同的關系。父子關系與兄弟關系（不是父子的都暫稱為兄弟吧）。原文作者：林鑫，作者博客：https://github.co

vue組件父子組件之間傳遞數據

head window lan data one logs 傳遞 child utf-8 舉個栗子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

react----父子組件之間的參數傳遞

css pre chan 屬於 rom child set state his 1.父組件向子組件傳遞參數 1 //父組件 2 import React from ‘react‘; 3 import ‘./header.css‘ 4 import Com

組件之間的通訊：兄弟組件之間的相互通訊（中央事件總線）

temp logs created str 總線 復雜 log 做的 ted 組件之間的通訊： 父->子:通過props,data屬性， 子->父：通過派發事件 兄弟組件：中央事件總線（......data{ Bus:new Vue()}.....） 更為復雜

react組件之間的參數傳遞

etc 傳遞 fault return con ole inf import cnblogs 1、父組件向子組件傳遞參數 class Child extends Component {　　　 componentDidMount(){　　　 　　let name = thi

angular-組件

裝飾器 sage utc bsp subscribe example url 限制 ces @Input 數據從父組件傳到子組件 子組件： import { Component, Input } from ‘@angular/core‘; import { Hero }

vue非父子組件之間值傳遞

eve return 傳遞 deb imp disable rom data ble 非父子之間通過一個空的vue實例作為事件總線，相當於一個中轉站。這個中轉站是所有組件都可以看到的，大家通過這個中轉站接收和觸發事件。 import Vue from ‘vue‘ impo

vue2.0父組件與子組件之間的通信

文件夾 授權 處理方法 傳值 目錄結構 著作權 sage 結構 ssa vue是一個輕量級的漸進式框架，對於它的一些特性和優點包括環境的一些配置在此就不做贅述，本篇文章主要來探討一下vue子父組件之間通信的問題 首先我們先來看一個demo,目錄結構為這樣： 　?src 　　

angular 組件生命周期

自定義 after cto mar 組件 onchange cnblogs des 第一次 摘要 angular 組件生命周期和react 有很大不同 初始化 constructor ngOnChanges 當輸入/輸出綁定的值改變時調用 ngOnInit 在第一次 ng

組件-任意平行組件之間的通信

另一個 charset utf con doc hang 裏的 發的 信號 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

編輯我們的第一個Angular組件

code span font log 都是 html art .cn 詳情 讓我們開始修改代碼吧！ src/app/* 後綴為html和css想必各位很熟悉吧，沒錯，就是它。 下面來了解一下目錄結構以及使用！ s

組件之間的通信

傳遞 回調函數 使用 事件 必須 location his 保存 ati react推崇的是單向數據流，自上而下進行數據的傳遞，但是由下而上或者不在一條數據流上的組件之間的通信就會變的復雜。解決通信問題的方法很多，如果只是父子級關系，父級可以將一個回調函數當作屬性傳遞給子級

在網頁中引用DWG控件，交互繪圖，和響應鼠標點擊對象的方法

MxCAD開發文檔在網頁中引用DWG控件，交互繪圖，和響應鼠標點擊對象的方法[MXDRAW CAD控件文檔]下面幫助的完整例子，在控件安裝目錄的Sample\Ie\iedemo.htm中. 主要用到函數說明A. ImplementCommandEventFun控件的命令事件函數，與用戶交互的操作，

vue組件之間的通信， 父子組件通信，兄弟組件通信

inf children segment 名稱 pre 方法 組件 相互 直接 組件通訊包括：父子組件間的通信和兄弟組件間的通信。在組件化系統構建中，組件間通信必不可少的。 父組件--> 子組件 1. 屬性設置 父組件關鍵代碼如下： <template>