摘要:在應(yīng)用開發(fā)中,組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景,也就是讓兩個(gè)或多個(gè)組件之間交互的方法。父組件綁定到這個(gè)事件屬性,并在事件發(fā)生時(shí)作出回應(yīng)。然后通過的元數(shù)據(jù)數(shù)組提供服務(wù)的實(shí)例,并通過構(gòu)造函數(shù)分別注入到父子組件中。
在Angular應(yīng)用開發(fā)中,組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景,也就是讓兩個(gè)或多個(gè)組件之間交互的方法。
根據(jù)數(shù)據(jù)的傳遞方向,分為父組件向子組件傳遞、子組件向父組件傳遞及通過服務(wù)傳遞三種交互方法。
父組件向子組件傳遞子組件通過@Input裝飾器定義輸入屬性,然后父組件在引用子組件的時(shí)候通過這些輸入屬性向子組件傳遞數(shù)據(jù),子組件可通過setter或ngOnChanges()來截聽輸入屬性值的變化。
先定義兩個(gè)組件,分別為子組件DemoChildComponent和父組件DemoParentComponent.
子組件:
@Component({ selector: "demo-child", template: `{{paramOne}}
{{paramTwo}}
` }) export class DemoChildComponent { @Input() paramOne: any; // 輸入屬性1 @Input() paramTwo: any; // 輸入屬性2 }
子組件通過@Input()定義輸入屬性paramOne和paramTwo(屬性值可以為任意數(shù)據(jù)類型)
父組件:
@Component({ selector: "demo-parent", template: `` }) export class DemoParentComponent { paramOneVal: any = "傳遞給paramOne的數(shù)據(jù)"; paramTwoVal: any = "傳遞給paramTwo的數(shù)據(jù)"; }
父組件在其模板中通過選擇器demo-child引用子組件DemoChildComponent,并通過子組件的兩個(gè)輸入屬性paramOne和paramTwo向子組件傳遞數(shù)據(jù),最后在子組件的模板中就顯示傳遞給paramOne的數(shù)據(jù)和傳遞給paramTwo的數(shù)據(jù)這兩行文本。
通過 setter 截聽輸入屬性值的變化在實(shí)際應(yīng)用中,我們往往需要在某個(gè)輸入屬性值發(fā)生變化的時(shí)候做相應(yīng)的操作,那么此時(shí)我們需要用到輸入屬性的 setter 來截聽輸入屬性值的變化。
我們將子組件DemoChildComponent進(jìn)行如下改造:
@Component({ selector: "demo-child", template: `{{paramOneVal}}
{{paramTwo}}
` }) export class DemoChildComponent { private paramOneVal: any; @Input() set paramOne (val: any) { // 輸入屬性1 this.paramOneVal = val; // dosomething }; get paramOne () { return this.paramOneVal; }; @Input() paramTwo: any; // 輸入屬性2 }
在上面的代碼中,我們可以看到通過paramOne屬性的 setter 將攔截到的值val賦值給內(nèi)部私有屬性paramOneVal,達(dá)到父組件傳遞數(shù)據(jù)給子組件的效果。當(dāng)然,最重要的是,在 setter 里面你可以做更多的其它操作,程序的靈活性就更強(qiáng)了。
通過ngOnChanges()來截聽輸入屬性值的變化通過 setter 截聽輸入屬性值的變化的方法只能對(duì)單個(gè)屬性值變化進(jìn)行監(jiān)視,如果需要監(jiān)視多個(gè)、交互式輸入屬性的時(shí)候,這種方法就顯得力不從心了。而通過使用 OnChanges 生命周期鉤子接口的 ngOnChanges() 方法(當(dāng)組件通過@Input裝飾器顯式指定的那些變量的值變化時(shí)調(diào)用)就可以實(shí)現(xiàn)同時(shí)監(jiān)視多個(gè)輸入屬性值的變化。
在子組件DemoChildComponent新增ngOnChanges:
@Component({ selector: "demo-child", template: `{{paramOneVal}}
{{paramTwo}}
` }) export class DemoChildComponent implements OnChanges { private paramOneVal: any; @Input() set paramOne (val: any) { // 輸入屬性1 this.paramOneVal = val; // dosomething }; get paramOne () { return this.paramOneVal; }; @Input() paramTwo: any; // 輸入屬性2 ngOnChanges(changes: {[propKey: string]: SimpleChange}) { for (let propName in changes) { // 遍歷changes let changedProp = changes[propName]; // propName是輸入屬性的變量名稱 let to = JSON.stringify(changedProp.currentValue); // 獲取輸入屬性當(dāng)前值 if (changedProp.isFirstChange()) { // 判斷輸入屬性是否首次變化 console.log(`Initial value of ${propName} set to ${to}`); } else { let from = JSON.stringify(changedProp.previousValue); // 獲取輸入屬性先前值 console.log(`${propName} changed from ${from} to ${to}`); } } } }
新增的ngOnChanges方法接收的參數(shù)changes是以輸入屬性名稱為鍵、值為SimpleChange的對(duì)象,SimpleChange對(duì)象含有當(dāng)前輸入屬性是否第一次變化、先前值、當(dāng)前值等屬性。因此在ngOnChanges方法中通過遍歷changes對(duì)象可監(jiān)視多個(gè)輸入屬性值并進(jìn)行相應(yīng)的操作。
獲取父組件實(shí)例前面介紹的都是子組件通過@Input裝飾器定義輸入屬性,這樣父組件可通過輸入屬性將數(shù)據(jù)傳遞給子組件。
當(dāng)然,我們可以想到一種更主動(dòng)的方法,那就是獲取到父組件實(shí)例,然后調(diào)用父組件的某個(gè)屬性或方法來獲取需要的數(shù)據(jù)。考慮到每個(gè)組件的實(shí)例都會(huì)添加到注入器的容器里,因此可通過依賴注入來找到父組件的示例。
子組件獲取父組件實(shí)例相比于父組件獲取子組件實(shí)例(直接通過模板變量、@ViewChild或@ViewChildren獲取)要麻煩一些。
要在子組件中獲取父組件的實(shí)例,有兩種情況:
已知父組件的類型
這種情況可以直接通過在構(gòu)造函數(shù)中注入DemoParentComponent來獲取已知類型的父組件引用,代碼示例如下:
@Component({ selector: "demo-child", template: `{{paramOne}}
{{paramTwo}}
` }) export class DemoChildComponent { paramOne: any; paramTwo: any; constructor(public demoParent: DemoParentComponent) { // 通過父組件實(shí)例demoParent獲取數(shù)據(jù) this.paramOne = demoParent.paramOneVal; this.paramTwo = demoParent.paramTwoVal; } }
未知父組件的類型
一個(gè)組件可能是多個(gè)組件的子組件,有時(shí)候無法直接知道父組件的類型,在Angular中,可通過類—接口(Class-Interface)的方式來查找,即讓父組件通過提供一個(gè)與類—接口標(biāo)識(shí)同名的別名來協(xié)助查找。
首先創(chuàng)建DemoParent抽象類,它只聲明了paramOneVal和paramTwoVal屬性,沒有實(shí)現(xiàn)(賦值),示例代碼如下:
export abstract class DemoParent { paramOneVal: any; paramTwoVal: any; }
然后在父組件DemoParentComponent的providers元數(shù)據(jù)中定義一個(gè)別名 Provider,用 useExisting 來注入父組件DemoParentComponent的實(shí)例,代碼示例如下:
@Component({ selector: "demo-parent", template: ``, providers: [{provider: DemoParent, useExisting: DemoParentComponent}] }) export class DemoParentComponent implements DemoParent { paramOneVal: any = "傳遞給paramOne的數(shù)據(jù)"; paramTwoVal: any = "傳遞給paramTwo的數(shù)據(jù)"; }
然后在子組件中就可通過DemoParent這個(gè)標(biāo)識(shí)找到父組件的示例了,示例代碼如下:
@Component({ selector: "demo-child", template: `子組件向父組件傳遞{{paramOne}}
{{paramTwo}}
` }) export class DemoChildComponent { paramOne: any; paramTwo: any; constructor(public demoParent: DemoParent) { // 通過父組件實(shí)例demoParent獲取數(shù)據(jù) this.paramOne = demoParent.paramOneVal; this.paramTwo = demoParent.paramTwoVal; } }
依然先定義兩個(gè)組件,分別為子組件DemoChildComponent和父組件DemoParentComponent.
子組件:
@Component({ selector: "demo-child", template: `子組件DemoChildComponent
` }) export class DemoChildComponent implements OnInit { readyInfo: string = "子組件DemoChildComponent初始化完成!"; @Output() ready: EventEmitter = new EventEmitter(); // 輸出屬性 ngOnInit() { this.ready.emit(this.readyInfo); } }
父組件:
@Component({ selector: "demo-parent", template: `父組件監(jiān)聽子組件的事件readyInfo: {{demoChild.readyInfo}}
readyInfo: {{demoChildComponent.readyInfo}}
` }) export class DemoParentComponent implements AfterViewInit { // @ViewChild("demoChild") demoChildComponent: DemoChildComponent; // 通過模板別名獲取 @ViewChild(DemoChildComponent) demoChildComponent: DemoChildComponent; // 通過組件類型獲取 ngAfterViewInit() { console.log(this.demoChildComponent.readyInfo); // 打印結(jié)果:子組件DemoChildComponent初始化完成! } onReady(evt: any) { console.log(evt); // 打印結(jié)果:子組件DemoChildComponent初始化完成! } }
子組件暴露一個(gè) EventEmitter 屬性,當(dāng)事件發(fā)生時(shí),子組件利用該屬性 emits(向上彈射)事件。父組件綁定到這個(gè)事件屬性,并在事件發(fā)生時(shí)作出回應(yīng)。
在上面定義好的子組件和父組件,我們可以看到:
子組件通過@Output()定義輸出屬性ready,然后在ngOnInit中利用ready屬性的 emits(向上彈射)事件。
父組件在其模板中通過選擇器demo-child引用子組件DemoChildComponent,并綁定了一個(gè)事件處理器(onReady()),用來響應(yīng)子組件的事件($event)并打印出數(shù)據(jù)(onReady($event)中的$event是固定寫法,框架(Angular)把事件參數(shù)(用 $event 表示)傳給事件處理方法)。
父組件與子組件通過本地變量(模板變量)互動(dòng)父組件不能使用數(shù)據(jù)綁定來讀取子組件的屬性或調(diào)用子組件的方法。但可以在父組件模板里,新建一個(gè)本地變量來代表子組件,然后利用這個(gè)變量來讀取子組件的屬性和調(diào)用子組件的方法。
在上面定義好的子組件和父組件,我們可以看到:
父組件在模板demo-child標(biāo)簽上定義了一個(gè)demoChild本地變量,然后在模板中獲取子組件的屬性:
父組件調(diào)用@ViewChild()readyInfo: {{demoChild.readyInfo}}
本地變量方法是個(gè)簡單便利的方法。但是它也有局限性,因?yàn)楦附M件-子組件的連接必須全部在父組件的模板中進(jìn)行。父組件本身的代碼對(duì)子組件沒有訪問權(quán)。
如果父組件的類需要讀取子組件的屬性值或調(diào)用子組件的方法,就不能使用本地變量方法。
當(dāng)父組件類需要這種訪問時(shí),可以把子組件作為 ViewChild,注入到父組件里面。
在上面定義好的子組件和父組件,我們可以看到:
父組件在組件類中通過@ViewChild()獲取到子組件的實(shí)例,然后就可以在模板或者組件類中通過該實(shí)例獲取子組件的屬性:
readyInfo: {{demoChildComponent.readyInfo}}
ngAfterViewInit() { console.log(this.demoChildComponent.readyInfo); // 打印結(jié)果:子組件DemoChildComponent初始化完成! }通過服務(wù)傳遞
Angular的服務(wù)可以在模塊注入或者組件注入(均通過providers注入)。
在模塊中注入的服務(wù)在整個(gè)Angular應(yīng)用都可以訪問(除惰性加載的模塊)。
在組件中注入的服務(wù)就只能該組件和其子組件進(jìn)行訪問,這個(gè)組件子樹之外的組件將無法訪問該服務(wù)或者與它們通訊。
下面的示例就以在組件中注入的服務(wù)來進(jìn)行父子組件之間的數(shù)據(jù)傳遞:
通訊的服務(wù):
@Injectable() export class CallService { info: string = "我是CallService的info"; }
父組件:
@Component({ selector: "demo-parent", template: `{{callService.info}}
`, providers: [CallService] }) export class DemoParentComponent { constructor(public callService: CallService) { console.log(callService.info); // 打印結(jié)果:我是CallService的info } changeInfo() { this.callService.info = "我是被父組件改變的CallService的info"; } }
子組件:
@Component({ selector: "demo-child", template: ` ` }) export class DemoChildComponent { constructor(public callService: CallService) { console.log(callService.info); // 打印結(jié)果:我是CallService的info } changeInfo() { this.callService.info = "我是被子組件改變的CallService的info"; } }
上面的代碼中,我們定義了一個(gè)CallService服務(wù),在其內(nèi)定義了info屬性,后面將分別在父子組件通過修改這個(gè)屬性的值達(dá)到父子組件互相傳遞數(shù)據(jù)的目的。
然后通過DemoParentComponent的providers元數(shù)據(jù)數(shù)組提供CallService服務(wù)的實(shí)例,并通過構(gòu)造函數(shù)分別注入到父子組件中。
此時(shí),通過父組件改變info按鈕或子組件改變info按鈕在父組件或子組件中改變CallService服務(wù)的info屬性值,然后在頁面可看到改變之后對(duì)應(yīng)的info屬性值。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93675.html
摘要:斯坦福宣布使用作為計(jì)算機(jī)課程的首選語言近日,某位有年教學(xué)經(jīng)驗(yàn)的斯坦福教授決定放棄,而使用作為計(jì)算機(jī)入門課程的教學(xué)語言。斯坦福官方站點(diǎn)將它們新的課程描述為是最流行的構(gòu)建交互式的開發(fā)語言,本課程會(huì)用講解中的實(shí)例。 前端每周清單第 11 期:Angular 4.1支持TypeScript 2.3,Vue 2.3優(yōu)化服務(wù)端渲染,優(yōu)秀React界面框架合集 為InfoQ中文站特供稿件,首發(fā)地址為...
摘要:是文檔的一種表示結(jié)構(gòu)。這些任務(wù)大部分都是基于它。這個(gè)實(shí)踐的重點(diǎn)是把你在前端練級(jí)攻略第部分中學(xué)到的一些東西和結(jié)合起來。一旦你進(jìn)入框架部分,你將更好地理解并使用它們。到目前為止,你一直在使用進(jìn)行操作。它是在前端系統(tǒng)像今天這樣復(fù)雜之前編寫的。 本文是 前端練級(jí)攻略 第二部分,第一部分請看下面: 前端練級(jí)攻略(第一部分) 在第二部分,我們將重點(diǎn)學(xué)習(xí) JavaScript 作為一種獨(dú)立的語言,如...
摘要:由于系統(tǒng)變得越來越復(fù)雜,人們提出了稱為預(yù)處理器和后處理器的工具來管理復(fù)雜性。后處理器在由預(yù)處理器手寫或編譯后對(duì)應(yīng)用更改。我之前建議的文章,,也涵蓋了預(yù)處理器相關(guān)的知識(shí)。 譯者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學(xué)習(xí)前端開發(fā)的時(shí)候。我看到了很多文章及...
摘要:具體來說,包管理器就是可以通過命令行,幫助你把外部庫和插件放到你的項(xiàng)目里面并在之后進(jìn)行版本升級(jí),這樣就不用手工復(fù)制和更新庫。現(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上: 學(xué)習(xí)HTML基礎(chǔ),了解如何編寫語義HTML 理解如何把網(wǎng)頁分...
摘要:具體來說,包管理器就是可以通過命令行,幫助你把外部庫和插件放到你的項(xiàng)目里面并在之后進(jìn)行版本升級(jí),這樣就不用手工復(fù)制和更新庫。現(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上: 學(xué)習(xí)HTML基礎(chǔ),了解如何編寫語義HTML 理解如何把網(wǎng)頁分...
閱讀 640·2021-10-13 09:39
閱讀 1449·2021-09-09 11:53
閱讀 2638·2019-08-29 13:55
閱讀 722·2019-08-28 18:08
閱讀 2586·2019-08-26 13:54
閱讀 2406·2019-08-26 11:44
閱讀 1835·2019-08-26 11:41
閱讀 3761·2019-08-26 10:15