摘要:具體思路子組件暴露一個(gè)屬性,當(dāng)事件發(fā)生時(shí),子組件利用該屬性向上彈射事件。父組件綁定到這個(gè)事件屬性,并在事件發(fā)生時(shí)作出回應(yīng)。這個(gè)組件子樹之外的組件將無法訪問該服務(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; } // 第二個(gè)@Input為子組件的屬性名masterName指定一個(gè)別名master,但是這個(gè)做法并不推薦
看著是不是很眼熟,寫代碼的邏輯和Vue幾乎可以說是一樣了,只是寫法上略有區(qū)別而已。
這個(gè)問題下還有兩個(gè)截聽輸入屬性值變化的方法,代碼邏輯不難推,但是其中的應(yīng)用場景方面我還沒想到是怎么樣的,之后也許繼續(xù)看Angular文檔會(huì)理解的更透徹一些,屆時(shí)再來補(bǔ)充啦~~
父組件監(jiān)聽子組件的事件這個(gè)操作方法也和Vue中的做法非常接近,而且在上一篇筆記中也有所提及。
具體思路:子組件暴露一個(gè)EventEmitter屬性,當(dāng)事件發(fā)生時(shí),子組件利用該屬性emits(向上彈射)事件。父組件綁定到這個(gè)事件屬性,并在事件發(fā)生時(shí)作出回應(yīng)。
還有,子組件的EventEmitter屬性是一個(gè)輸出屬性,通常帶有@Output裝飾器,比較完整的示例如下:
// 子組件:先在自己的組件中觸發(fā)了vote方法,然后在vote方法中向父組件發(fā)出onVoted事件,同時(shí)傳送一個(gè)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父子組件的其他互動(dòng)關(guān)系 父組件與子組件通過本地變量互動(dòng)(); voted = false; vote(agreed: boolean) { this.onVoted.emit(agreed); this.voted = true; } } // 父組件:監(jiān)聽onVoted事件,如果監(jiān)聽到了則觸發(fā)自己組件中的agree方法,同時(shí)通過$event把payload傳參給agree html: ts: export class VoteTakerComponent { onVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; } }
父組件對子組件的數(shù)據(jù)綁定屬于單向綁定,子組件無法直接把數(shù)據(jù)、屬性和自身的方法傳送給父組件使用。盡管有EventEmitter屬性,但是有時(shí)候需要直接訪問子組件的內(nèi)容,用這種方法并不合適。
// 可以在父組件的模板中直接訪問子組件的所有屬性和方法,例如此例便是直接訪問了子組件的start(),stop()方法和seconds屬性父組件調(diào)用@ViewChild(){{timer.seconds}}
上述方法有一定局限性:父組件-子組件的連接必須全部在父組件的模板中進(jìn)行。父組件本身的代碼對子組件沒有訪問權(quán)。如果想要在代碼中直接訪問子組件的內(nèi)容,可以使用這個(gè)方法把子組件作為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ù)來通訊
父組件和它的子組件(們)共享同一個(gè)服務(wù),利用該服務(wù)在父子組件之間實(shí)現(xiàn)雙向通訊。
該服務(wù)實(shí)例的作用域被限制在父組件和其子組件(們)內(nèi)。這個(gè)組件子樹之外的組件將無法訪問該服務(wù)或者與它們通訊。
父子組件通過各自的構(gòu)造函數(shù)注入該服務(wù)。文檔中的例子還需要一些額外知識才能明白,之后再分析啦!~
前端新人,寫的不對的地方還請指出;
如果覺得對你有幫助,可以點(diǎn)個(gè)贊鼓勵(lì)一下我哦!~~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/90023.html
摘要:所以,在的世界中,唯一的作用是用來初始化元素和指令的狀態(tài)。當(dāng)進(jìn)行數(shù)據(jù)綁定時(shí),只是在與元素和指令的和事件打交道,而就基本上靠邊站了,只有比較特殊的情況才會(huì)用到他。事件綁定事件名事件綁定分為對原生事件綁定和自定義事件綁定。 數(shù)據(jù)綁定總體而言有三種類型: {{...}} 插值表達(dá)式綁定 屬性綁定(包括property和attitude 事件綁定 插值表達(dá)式綁定 既可以寫在html結(jié)構(gòu)中,...
摘要:如果沒有,請查看學(xué)習(xí)筆記之安裝和使用教程事件綁定準(zhǔn)備工作了解目的在模版的界面上面增加一個(gè)按鈕,然后通過小括號綁定一個(gè)事件。 簡介 使用插值表達(dá)式將一個(gè)表達(dá)式的值顯示在模版上 {{productTitle}} 使用方括號將HTML標(biāo)簽的一個(gè)屬性值綁定到一個(gè)表達(dá)式上 使用小括號將組件控制器的一個(gè)方法綁定到模版上面的一個(gè)事件的處理器上 按鈕綁定事件 注意 在開始下面的例子之前,請先確認(rèn)已...
摘要:所以如果需要使用生命周期,只要在我們的代碼中寫上鉤子函數(shù)即可,會(huì)找到并調(diào)用像這樣的鉤子方法,有沒有接口無所謂。當(dāng)使用構(gòu)造函數(shù)新建一個(gè)組件或指令后,就會(huì)按下面的順序在特定時(shí)刻調(diào)用這些生命周期鉤子方法用處當(dāng)設(shè)置數(shù)據(jù)綁定輸入屬性發(fā)生變化時(shí)響應(yīng)。 接口和鉤子 在介紹生命周期的相關(guān)概念之前,可以先復(fù)習(xí)一下TypeScript對于接口的概念。 在這里主要使用的是類接口及其實(shí)現(xiàn): interf...
摘要:每完成被投影組件內(nèi)容發(fā)生變化時(shí)調(diào)用。每次做完組件視圖和子組件視圖的變更檢測之后調(diào)用。組件銷毀時(shí)調(diào)用,主要用于內(nèi)存回收。策略策略是當(dāng)組件的輸入屬性發(fā)生變更時(shí)才會(huì)檢查當(dāng)前組件及其子組件。 angular4 組件通訊、生命周期 主要通訊形式 父組件通過屬性綁定到子組件,子組件通過事件傳遞參數(shù)到父組件 父組件通過局部變量獲取子組件的引用 父組件使用@ViewChild獲取子組件的引用 兩個(gè)不...
摘要:在引起狀態(tài)變化的時(shí)刻,框架自動(dòng)觸發(fā)臟檢查,也可以手動(dòng)執(zhí)行臟檢查,直接操作更新視圖。最后,說了這么多,大家在具體選型時(shí)還是要首先分析自己的需求和現(xiàn)狀,然后再做選擇。 作為一個(gè)軟件開發(fā)者,最大的挑戰(zhàn)就是在不斷涌現(xiàn)的新技術(shù)中進(jìn)行取舍,持續(xù)學(xué)習(xí)是從事這一行業(yè)的必備技能。在這個(gè)領(lǐng)域里,技術(shù)更新最快地又非前端莫屬了。各種框架的出現(xiàn)、版本的更新此起彼伏,呈現(xiàn)出一派欣欣向榮之景。 在項(xiàng)目中必不可少的便...
閱讀 1700·2021-11-02 14:47
閱讀 3648·2019-08-30 15:44
閱讀 1334·2019-08-29 16:42
閱讀 1731·2019-08-26 13:53
閱讀 935·2019-08-26 10:41
閱讀 3458·2019-08-23 17:10
閱讀 597·2019-08-23 14:24
閱讀 1717·2019-08-23 11:59