Angular4學習筆記——組件之間的交互

Guakin_Huang 發布于2019-08-21 17:48 / 2604人閱讀

摘要：具體思路子組件暴露一個屬性，當事件發生時，子組件利用該屬性向上彈射事件。父組件綁定到這個事件屬性，并在事件發生時作出回應。這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。父子組件通過各自的構造函數注入該服務。

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

Angular對于父組件 => 子組件的數據通信做法和Vue很相似。

// 父組件html模板

    
// 子組件接收數據
import { Component, Input } from "@angular/core";
import { Hero } from "./hero";

export class HeroChildComponent {
  @Input() hero: Hero;
  @Input("master") masterName: string;
}
// 第二個@Input為子組件的屬性名masterName指定一個別名master，但是這個做法并不推薦

看著是不是很眼熟，寫代碼的邏輯和Vue幾乎可以說是一樣了，只是寫法上略有區別而已。

這個問題下還有兩個截聽輸入屬性值變化的方法，代碼邏輯不難推，但是其中的應用場景方面我還沒想到是怎么樣的，之后也許繼續看Angular文檔會理解的更透徹一些，屆時再來補充啦~~

父組件監聽子組件的事件

這個操作方法也和Vue中的做法非常接近，而且在上一篇筆記中也有所提及。
具體思路：子組件暴露一個EventEmitter屬性，當事件發生時，子組件利用該屬性emits(向上彈射)事件。父組件綁定到這個事件屬性，并在事件發生時作出回應。
還有，子組件的EventEmitter屬性是一個輸出屬性，通常帶有@Output裝飾器，比較完整的示例如下：

// 子組件：先在自己的組件中觸發了vote方法，然后在vote方法中向父組件發出onVoted事件，同時傳送一個payload(agreed)
// 在Vue中的寫法是this.$emit(onVoted,agreed)
import { Component, EventEmitter, Input, Output } from "@angular/core";

export class VoterComponent {
  @Input()  name: string;
  @Output() onVoted = new EventEmitter();
  voted = false;
 
  vote(agreed: boolean) {
    this.onVoted.emit(agreed);
    this.voted = true;
  }
}
// 父組件：監聽onVoted事件，如果監聽到了則觸發自己組件中的agree方法,同時通過$event把payload傳參給agree
html:

ts:
export class VoteTakerComponent {
  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++;
  }
}

父子組件的其他互動關系 父組件與子組件通過本地變量互動

父組件對子組件的數據綁定屬于單向綁定，子組件無法直接把數據、屬性和自身的方法傳送給父組件使用。盡管有EventEmitter屬性，但是有時候需要直接訪問子組件的內容，用這種方法并不合適。

// 可以在父組件的模板中直接訪問子組件的所有屬性和方法，例如此例便是直接訪問了子組件的start(),stop()方法和seconds屬性


{{timer.seconds}}

父組件調用@ViewChild()

上述方法有一定局限性：父組件-子組件的連接必須全部在父組件的模板中進行。父組件本身的代碼對子組件沒有訪問權。如果想要在代碼中直接訪問子組件的內容，可以使用這個方法把子組件作為ViewChild，注入到父組件里面，具體操作如下：

// 需要通過@ViewChild屬性裝飾器，將子組件CountdownTimerComponent注入到私有屬性timerComponent里面，并掛在AfterViewInit生命周期鉤子里
export class CountdownViewChildParentComponent implements AfterViewInit {
// 在父組件中將子組件注冊為變量timerComponent,記得在括號里寫明子組件名字~~ 
  @ViewChild(CountdownTimerComponent)  private timerComponent: CountdownTimerComponent;
// 這樣就可以通過this.timerComponent訪問子組件的內容了
  start() { this.timerComponent.start(); }
  stop() { this.timerComponent.stop(); }
}

通過服務來通訊

父組件和它的子組件（們）共享同一個服務，利用該服務在父子組件之間實現雙向通訊。
該服務實例的作用域被限制在父組件和其子組件（們）內。這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。

父子組件通過各自的構造函數注入該服務。文檔中的例子還需要一些額外知識才能明白，之后再分析啦！~

前端新人，寫的不對的地方還請指出；
如果覺得對你有幫助，可以點個贊鼓勵一下我哦！~~

GPU云服務器云服務器組件之間通信組件交互學習筆記學習筆記一

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90023.html

Angular4學習筆記——數據綁定

摘要：所以，在的世界中，唯一的作用是用來初始化元素和指令的狀態。當進行數據綁定時，只是在與元素和指令的和事件打交道，而就基本上靠邊站了，只有比較特殊的情況才會用到他。事件綁定事件名事件綁定分為對原生事件綁定和自定義事件綁定。數據綁定總體而言有三種類型： {{...}} 插值表達式綁定屬性綁定（包括property和attitude 事件綁定插值表達式綁定既可以寫在html結構中，...

MRZYD 2019-08-21 17:48 評論0 收藏0
Angular4學習筆記之DOM屬性綁定

摘要：如果沒有，請查看學習筆記之安裝和使用教程事件綁定準備工作了解目的在模版的界面上面增加一個按鈕，然后通過小括號綁定一個事件。簡介使用插值表達式將一個表達式的值顯示在模版上 {{productTitle}} 使用方括號將HTML標簽的一個屬性值綁定到一個表達式上使用小括號將組件控制器的一個方法綁定到模版上面的一個事件的處理器上按鈕綁定事件注意在開始下面的例子之前，請先確認已...

Genng 2019-08-21 18:34 評論0 收藏0
Angular4學習筆記——生命周期鉤子

摘要：所以如果需要使用生命周期，只要在我們的代碼中寫上鉤子函數即可，會找到并調用像這樣的鉤子方法，有沒有接口無所謂。當使用構造函數新建一個組件或指令后，就會按下面的順序在特定時刻調用這些生命周期鉤子方法用處當設置數據綁定輸入屬性發生變化時響應。接口和鉤子在介紹生命周期的相關概念之前，可以先復習一下TypeScript對于接口的概念。在這里主要使用的是類接口及其實現： interf...

fizz 2019-08-21 17:48 評論0 收藏0
angular4學習記錄 -- 組件通訊、生命周期

摘要：每完成被投影組件內容發生變化時調用。每次做完組件視圖和子組件視圖的變更檢測之后調用。組件銷毀時調用，主要用于內存回收。策略策略是當組件的輸入屬性發生變更時才會檢查當前組件及其子組件。 angular4 組件通訊、生命周期主要通訊形式父組件通過屬性綁定到子組件，子組件通過事件傳遞參數到父組件父組件通過局部變量獲取子組件的引用父組件使用@ViewChild獲取子組件的引用兩個不...

shadajin 2019-08-21 16:45 評論0 收藏0
前端框架這么多，該如何抉擇？

摘要：在引起狀態變化的時刻，框架自動觸發臟檢查，也可以手動執行臟檢查，直接操作更新視圖。最后，說了這么多，大家在具體選型時還是要首先分析自己的需求和現狀，然后再做選擇。作為一個軟件開發者，最大的挑戰就是在不斷涌現的新技術中進行取舍，持續學習是從事這一行業的必備技能。在這個領域里，技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏，呈現出一派欣欣向榮之景。在項目中必不可少的便...

Jackwoo 2019-08-29 15:37 評論0 收藏0