建站
咨詢
售后
建站咨詢
新聞中心
在父子指令及組件之間共享數(shù)據(jù)
Angular 中的一個(gè)常見(jiàn)模式就是在父組件和一個(gè)或多個(gè)子組件之間共享數(shù)據(jù)?？梢杂?nbsp;?@Input()? 和 ?@Output()? 來(lái)實(shí)現(xiàn)這個(gè)模式。
創(chuàng)新互聯(lián)成立以來(lái)不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點(diǎn)，以客戶需求中心、市場(chǎng)為導(dǎo)向”的快速反應(yīng)體系。對(duì)公司的主營(yíng)項(xiàng)目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計(jì)、行業(yè) / 企業(yè)門(mén)戶設(shè)計(jì)推廣、行業(yè)門(mén)戶平臺(tái)運(yùn)營(yíng)、手機(jī)APP定制開(kāi)發(fā)、手機(jī)網(wǎng)站制作設(shè)計(jì)、微信網(wǎng)站制作、軟件開(kāi)發(fā)、IDC機(jī)房托管等實(shí)行標(biāo)準(zhǔn)化操作，讓客戶可以直觀的預(yù)知到從創(chuàng)新互聯(lián)可以獲得的服務(wù)效果。
本章包含代碼片段的可工作實(shí)例參閱現(xiàn)場(chǎng)演練 / 下載范例。
考慮以下層次結(jié)構(gòu)：
?
?@Input()? 和 ?@Output()? 為子組件提供了一種與其父組件通信的方法。 ?@Input()? 允許父組件更新子組件中的數(shù)據(jù)。相反，?@Output()? 允許子組件向父組件發(fā)送數(shù)據(jù)。
把數(shù)據(jù)發(fā)送到子組件
子組件或指令中的 ?@Input()? 裝飾器表示該屬性可以從其父組件中獲取值。
要使用 ?@Input()?，就必須對(duì)父組件和子組件進(jìn)行配置。
配置子組件
要使用 ?@Input()? 裝飾器，首先要導(dǎo)入 ?Input?，然后用 ?@Input()? 裝飾該屬性，如下例所示。
import { Component, Input } from '@angular/core'; // First, import Input
export class ItemDetailComponent {
@Input() item = ''; // decorate the property with @Input()
}在這個(gè)例子中， ?@Input()? 會(huì)修飾屬性 ?item?，它的類(lèi)型為 ?string?，但 ?@Input()? 屬性可以是任意類(lèi)型，比如 ?number?、?string?、?boolean ?或 ?object?。?item ?的值來(lái)自父組件。
接下來(lái)，在子組件模板中添加以下內(nèi)容：
Today's item: {{item}}
配置父組件
下一步是在父組件的模板中綁定該屬性。在這個(gè)例子中，父組件模板是 ?app.component.html? 。
- 使用子組件的 selector (?
- 使用屬性綁定把子組件的 ?
item?屬性綁定到父組件的 ?currentItem?屬性上。 - 在父組件類(lèi)中，為 ?
currentItem?指定一個(gè)值：
export class AppComponent {
currentItem = 'Television';
}通過(guò) ?@Input()?，Angular 把 ?currentItem ?的值傳給子組件，以便 ?item ?渲染為 ?Television ?。
下圖展示了這種結(jié)構(gòu)：
方括號(hào) ?[]? 中的目標(biāo)就是子組件中用 ?@Input()? 裝飾的那個(gè)屬性。綁定源（等號(hào)的右邊部分）則是父組件傳給內(nèi)嵌組件的數(shù)據(jù)。
監(jiān)視 @Input() 的變更
要想監(jiān)視 ?@Input()? 屬性的變化，可以用 Angular 的生命周期鉤子?OnChanges ?。
把數(shù)據(jù)發(fā)送到父組件
子組件或指令中的 ?@Output()? 裝飾器允許數(shù)據(jù)從子組件傳給父組件。
?@Output()? 在子組件中標(biāo)記了一個(gè)屬性，作為數(shù)據(jù)從子組件傳遞到父組件的途徑。
子組件使用 ?@Output()? 屬性來(lái)引發(fā)事件，以通知父組件這一變化。為了引發(fā)事件， ?@Output()? 必須是 ?EventEmitter ?類(lèi)型，它是 ?@angular/core? 中用來(lái)發(fā)出自定義事件的類(lèi)。
下面的例子給出了如何在組件中設(shè)置 ?@Output()?，來(lái)把數(shù)據(jù)從 HTML 的 ?? 推送到父組件的數(shù)組中。
要使用 ?@Output()? ，就必須配置父組件和子組件。
配置子組件
下面的例子中有一個(gè) ?? ，用戶可以輸入一個(gè)值，然后點(diǎn)擊一個(gè)引發(fā)事件 ?? 然后， ?EventEmitter ?數(shù)據(jù)中繼到父組件。
- 在子組件類(lèi)中導(dǎo)入 ?
Output?和 ?EventEmitter? - 在組件類(lèi)中，用 ?
@Output()? 裝飾一個(gè)屬性。下面的例子中 ?newItemEvent?這個(gè) ?@Output()? 的類(lèi)型為 ?EventEmitter?，這意味著它是一個(gè)事件。 - ?
@Output()? - 一個(gè)裝飾器函數(shù)，它把該屬性標(biāo)記為數(shù)據(jù)從子組件進(jìn)入父組件的一種途徑 - ?
newItemEvent?- 這個(gè) ?@Output()? 的名字 - ?
EventEmitter? - 這個(gè) ?@Output()? 的類(lèi)型 - ?
new EventEmitter? - 使用 Angular 來(lái)創(chuàng)建一個(gè)新的事件發(fā)射器，它發(fā)出的數(shù)據(jù)是 ?() string?類(lèi)型的。 - 在同一個(gè)組件類(lèi)中創(chuàng)建一個(gè) ?
addNewItem()? 方法：
import { Output, EventEmitter } from '@angular/core';@Output() newItemEvent = new EventEmitter(); 上述聲明中的差異點(diǎn)如下：
export class ItemOutputComponent {
@Output() newItemEvent = new EventEmitter();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
} ?addNewItem()? 函數(shù)使用 ?newItemEvent ?這個(gè) ?@Output()? 來(lái)引發(fā)一個(gè)事件，該事件帶有用戶輸入到 ?? 中的值。
配置子組件的模板
子組件的模板有兩個(gè)控件。第一個(gè)是帶有模板引用變量 ?#newItem? 的 ??，用戶可在其中輸入條目名稱(chēng)。 ?#newItem? 變量的 ?value ?屬性存儲(chǔ)了用戶輸入到 ?? 中的值。
第二個(gè)元素是帶有 ?click ?事件綁定 的 ?? 元素。
?(click) ?事件綁定到了子組件類(lèi)中 ?addNewItem()? 方法。?addNewItem()? 方法接受一個(gè) ?#newItem.value? 屬性的值作為參數(shù)。
配置父組件
此范例中的 ?AppComponent ?有一個(gè) ?items ?列表，以及一個(gè)向數(shù)組中添加更多條目的方法。
export class AppComponent {
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
this.items.push(newItem);
}
}?addItem()? 方法接受一個(gè)字符串形式的參數(shù)，然后把該字符串添加到 ?items ?數(shù)組中。
配置父組件的模板
- 在父模板中，把父組件的方法綁定到子組件的事件上。
- 把子組件選擇器（?
app.component.html? 中。 - {{item}}
事件綁定 ?(newItemEvent)='addItem($event)' ?會(huì)把子組件中的 ?newItemEvent ?事件連接到父組件的 ?addItem()? 方法。
?$event? 中包含用戶在子組件模板上的 ?? 中鍵入的數(shù)據(jù)。
要了解 ?@Output()? 的工作方式，你可以把以下內(nèi)容添加到父組件的模板中：
?*ngFor? 會(huì)迭代 ?items ?數(shù)組中的條目。當(dāng)你在子組件的 ?? 中輸入一個(gè)值并單擊該按鈕時(shí)，子組件就會(huì)發(fā)出該事件，而父組件的 ?addItem()? 方法會(huì)把這個(gè)值追加到其 ?items ?數(shù)組中，并且列表中會(huì)渲染出這個(gè)新條目。
同時(shí)使用 @Input() 和 @Output()
可以在同一個(gè)子組件上使用 ?@Input()? 和 ?@Output()?，范例如下：
目標(biāo) ?item ?是子組件類(lèi)中的一個(gè) ?@Input()? 屬性，它會(huì)從父組件的 ?currentItem ?屬性中獲取它的值。當(dāng)你單擊“刪除”時(shí)，子組件就會(huì)引發(fā)一個(gè)事件 ?deleteRequest ?，它會(huì)作為父組件中 ?crossOffItem()? 方法的參數(shù)。
下圖展示了子組件 ?@Input()? 和 ?@Output()? 的各個(gè)部分。
這里的子選擇器是 ?item ?和 ?deleteRequest ?是子組件類(lèi)中的 ?@Input()? 和 ?@Output()? 屬性。而 ?currentItem ?屬性和 ?crossOffItem()? 方法都位于父組件類(lèi)中。
名稱(chēng)欄目：創(chuàng)新互聯(lián)Angular教程：Angular在父子組件、指令之間共享數(shù)據(jù)
標(biāo)題來(lái)源：http://fisionsoft.com.cn/article/cddjcji.html
