成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular4學(xué)習(xí)筆記——組件之間的交互

Guakin_Huang / 2602人閱讀

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

通過輸入型綁定把數(shù)據(jù)從父組件傳到子組件

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

// 父組件html模板

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

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

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

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

父組件監(jiān)聽子組件的事件

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

// 子組件：先在自己的組件中觸發(fā)了vote方法，然后在vote方法中向父組件發(fā)出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;
  }
}
// 父組件：監(jiān)聽onVoted事件，如果監(jiān)聽到了則觸發(fā)自己組件中的agree方法,同時通過$event把payload傳參給agree
html:

ts:
export class VoteTakerComponent {
  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++;
  }
}
父子組件的其他互動關(guān)系 父組件與子組件通過本地變量互動

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

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



{{timer.seconds}}
父組件調(diào)用@ViewChild()

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90023.html

相關(guān)文章

  • Angular4學(xué)習(xí)筆記——數(shù)據(jù)綁定

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

    MRZYD 評論0 收藏0

  • Angular4學(xué)習(xí)筆記之DOM屬性綁定

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

    Genng 評論0 收藏0

  • Angular4學(xué)習(xí)筆記——生命周期鉤子

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

    fizz 評論0 收藏0

  • angular4學(xué)習(xí)記錄 -- 組件通訊、生命周期

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

    shadajin 評論0 收藏0

  • 前端框架這么多，該如何抉擇？

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

    Jackwoo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<