angular雙向綁定詳解
更新時間：2021年12月22日 15:46:00 作者：桐溪漂流
這篇文章主要為大家介紹了angular雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
雙向綁定原理
雙向綁定將屬性綁定與事件綁定結合在一起。
Angular 的雙向綁定語法是方括號和圓括號的組合 [()]。
[] 進行屬性綁定，() 進行事件綁定。
名稱規(guī)則為 [輸入名] + Change。
- 屬性綁定(@
Input-輸入) - 設置特定的元素屬性。 - 事件綁定(@
Output-輸出) - 偵聽元素更改事件。
所以表單雙向綁定中有 ngModel 和 ngModelChange，也可以自定義雙向綁定屬性。
ngModel
與表單元素進行雙向綁定
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bind',
template: `
<div>
<div>Name: {{ name }}</div>
<input type="text" style="width: 300px;" nz-input name="name" [(ngModel)]="name" autocomplete="off">
</div>
`
})
export class BindComponent implements OnInit {
name = '';
constructor() { }
ngOnInit(): void { }
}
效果圖
自定義雙向綁定屬性
組件-html
<div>
<div>inner: {{ value }}</div>
<input style="width: 300px;" nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>
組件-ts
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-inner',
templateUrl: './inner.component.html',
styleUrls: ['./inner.component.scss']
})
export class InnerComponent implements OnInit {
// 設定輸入屬性
@Input() value!: string;
// 設定輸出事件
@Output() valueChange: EventEmitter<string> = new EventEmitter();
constructor() { }
ngOnInit(): void { }
onInput(value: string){
// 觸發(fā)輸出事件-輸出數據
this.valueChange.emit(value);
}
}
外部使用
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-outer',
template: `
<div>
<div>Name: {{ name }}</div>
<app-inner [(value)]="name"></app-inner>
</div>
`
})
export class OuterComponent implements OnInit {
name = '';
constructor() { }
ngOnInit(): void { }
}
效果圖
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
在html規(guī)范里面,它定義了非常多的標簽,在這些標簽里面,相同標簽之間的嵌套,不同標簽之間的嵌套,是十分常見,在Angular里面,我們可以通過自定義標簽的方式引用組件,這里的標簽能否像原生的html標簽一樣,來嵌入html標簽,或者嵌套其他組件標簽呢?本文將介紹投影的作用。2021-05-05
由于最近的一個項目使用的是angularjs1.0的版本，涉及到分頁查詢數據的功能，后來自己就用自定義指令實現了該功能，下面小編把實例demo分享到腳本之家平臺，需要的朋友參考下2017-09-09
Angular應用tsconfig.json中的lib屬性示例解析
這篇文章主要介紹了Angular應用tsconfig.json中的lib屬性示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
AngularJS基礎 ng-mouseover 指令簡單示例
本文主要介紹AngularJS ng-mouseover 指令,這里幫大家整理了AngularJS 指令的基礎知識,并附代碼示例,有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了Angular 常用指令實例總結整理的相關資料,本文整理了常用指令，大家可以參考使用，需要的朋友可以參考下2016-12-12
Angular.js與node.js項目里用cookie校驗賬戶登錄詳解
這篇文章主要介紹了Angular.js與node.js項目里用cookie校驗賬戶登錄的相關資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
這篇文章主要給大家介紹了關于ionic3實戰(zhàn)教程之隨機布局瀑布流的實現方法，文中通過示例代碼和圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
Angular中ng-template和ng-container的應用小結
Angular的日常工作中經常會使用到ng-template和ng-container，本文對他們做一個總結,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-06-06
Angularjs在360兼容模式下取數據緩存問題的解決辦法
這篇文章主要為大家詳細介紹了Angularjs在360兼容模式下取數據緩存問題的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
AngularJS是一款優(yōu)秀的前端JS框架，已經被用于Google的多款產品當中。下面通過本文給大家分享使用AngularJS對表單提交內容進行驗證的操作方法，需要的的朋友參考下吧2017-07-07