建站
咨詢
售后
建站咨詢
新聞中心
雙向綁定
雙向綁定為應(yīng)用中的組件提供了一種共享數(shù)據(jù)的方式。使用雙向綁定綁定來偵聽事件并在父組件和子組件之間同步更新值。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了新興免費(fèi)建站歡迎大家使用！
包含本指南中的代碼片段的可工作示例參見現(xiàn)場演練 / 下載范例。
先決條件
為了充分利用雙向綁定，你應(yīng)該對以下概念有基本的了解：
- 屬性綁定
- 事件綁定
- 輸入和輸出
雙向綁定將屬性綁定與事件綁定結(jié)合在一起：
- 屬性綁定設(shè)置特定的元素屬性。
- 事件綁定偵聽元素更改事件。
添加雙向數(shù)據(jù)綁定
Angular 的雙向綁定語法是方括號和圓括號的組合 ?[()]?。?[]? 進(jìn)行屬性綁定，?()? 進(jìn)行事件綁定，如下所示。
雙向綁定工作原理
為了使雙向數(shù)據(jù)綁定有效，?@Output()? 屬性的名字必須遵循 ?inputChange ?模式，其中 ?input ?是相應(yīng) ?@Input()? 屬性的名字。例如，如果 ?@Input()? 屬性為 ?size ?，則 ?@Output()? 屬性必須為 ?sizeChange ?。
后面的 ?sizerComponent ?具有值屬性 ?size ?和事件屬性 ?sizeChange?。 ?size ?屬性是 ?@Input()?，因此數(shù)據(jù)可以流入 ?sizerComponent ?。 ?sizeChange ?事件是一個 ?@Output()? ，它允許數(shù)據(jù)從 ?sizerComponent ?流出到父組件。
接下來，有兩個方法， ?dec()? 用于減小字體大小， ?inc()? 用于增大字體大小。這兩種方法使用 ?resize()? 在最小/最大值的約束內(nèi)更改 ?size ?屬性的值，并發(fā)出帶有新 ?size ?值的事件。
export class SizerComponent {
@Input() size!: number | string;
@Output() sizeChange = new EventEmitter();
dec() { this.resize(-1); }
inc() { this.resize(+1); }
resize(delta: number) {
this.size = Math.min(40, Math.max(8, +this.size + delta));
this.sizeChange.emit(this.size);
}
} ?sizerComponent ?模板有兩個按鈕，分別將 click 事件綁定到 ?inc()? 和 ?dec()? 方法。當(dāng)用戶單擊按鈕之一時， ?sizerComponent ?調(diào)用相應(yīng)的方法。 ?inc()? 和 ?dec()? 這兩個方法分別使用 +1 或 -1 調(diào)用 ?resize()? 方法，它使用新的 size 值引發(fā) ?sizeChange ?事件。
在 ?AppComponent ?模板中， ?fontSizePx ?被雙向綁定到 ?SizerComponent ?。
在 ?AppComponent ?中，通過將 ?fontSizePx ?的值設(shè)置為 16 來設(shè)置初始 ?SizerComponent.size? 值。
fontSizePx = 16;單擊這些按鈕將更新 ?AppComponent.fontSizePx?。修改后的 ?AppComponent.fontSizePx? 值將更新樣式綁定，從而使顯示的文本變大或變小。
雙向綁定語法是屬性綁定和事件綁定的組合的簡寫形式。拆成單獨(dú)的屬性綁定和事件綁定形式的 ?SizerComponent ?代碼如下：
?$event? 變量包含 ?SizerComponent.sizeChange? 事件的數(shù)據(jù)。當(dāng)用戶單擊按鈕時，Angular 將 ?$event? 賦值給 ?AppComponent.fontSizePx?。
表單中的雙向綁定
因?yàn)闆]有任何原生 HTML 元素遵循了 ?
x? 值和 ?
xChange?事件的命名模式，所以與表單元素進(jìn)行雙向綁定需要使用 ?
NgModel?。
新聞名稱：創(chuàng)新互聯(lián)Angular教程：Angular雙向綁定
文章URL：http://www.dlmjj.cn/article/cddoijo.html
