angular雙向綁定詳解

更新時(shí)間：2021年12月22日 15:46:00 作者：桐溪漂流

這篇文章主要為大家介紹了angular雙向綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

雙向綁定原理

雙向綁定將屬性綁定與事件綁定結(jié)合在一起。

Angular 的雙向綁定語(yǔ)法是方括號(hào)和圓括號(hào)的組合 [()]。

[] 進(jìn)行屬性綁定，() 進(jìn)行事件綁定。

名稱規(guī)則為 [輸入名] + Change。

屬性綁定(@Input-輸入) - 設(shè)置特定的元素屬性。
事件綁定(@Output-輸出) - 偵聽(tīng)元素更改事件。

所以表單雙向綁定中有 ngModel 和 ngModelChange，也可以自定義雙向綁定屬性。

ngModel

與表單元素進(jìn)行雙向綁定

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 {
  // 設(shè)定輸入屬性
  @Input() value!: string;
  // 設(shè)定輸出事件
  @Output() valueChange: EventEmitter<string> = new EventEmitter();
  constructor() { }
  ngOnInit(): void { }
  onInput(value: string){
    // 觸發(fā)輸出事件-輸出數(shù)據(jù)
    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 { }
}

效果圖

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)
最近在做AngularJS 項(xiàng)目，這是寫(xiě)的一個(gè)60秒倒計(jì)時(shí)功能，下面小編給大家介紹AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)，需要的朋友參考下吧
2017-06-06
詳解Angular Reactive Form 表單驗(yàn)證
本文我們將介紹 Reactive Form 表單驗(yàn)證的相關(guān)知識(shí)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
AngularJS基礎(chǔ) ng-list 指令詳解及示例代碼
本文主要介紹AngularJS ng-list 指令,這里幫大家整理了ng-list指令的基本資料,并附有示例代碼,有需要的小伙伴可以參考下
2016-08-08
AngularJs入門(mén)教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例
這篇文章主要介紹了AngularJs入門(mén)教程之環(huán)境搭建+創(chuàng)建應(yīng)用的方法,較為詳細(xì)的分析了AngularJS的功能、下載及應(yīng)用創(chuàng)建方法,需要的朋友可以參考下
2016-11-11
angular4+百分比進(jìn)度顯示插件用法示例
這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下
2019-05-05
js常用正則表達(dá)式集錦
這篇文章主要介紹了js常用正則表達(dá)式集錦，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
ui-router中使用ocLazyLoad和resolve的具體方法
這篇文章主要介紹了ui-router中使用ocLazyLoad和resolve的具體方法，詳細(xì)的介紹了ocLazyLoad和resolve的具體用法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
AngularJS 依賴注入詳解及示例代碼
本文主要介紹AngularJS 依賴注入的知識(shí)，這里整理了相關(guān)的基礎(chǔ)知識(shí)，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下
2016-08-08
Angular2數(shù)據(jù)綁定詳解
本篇文章主要介紹了Angular2數(shù)據(jù)綁定的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04
AngularJS基礎(chǔ) ng-show 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-show 指令,這里對(duì)ng-show 指令的基礎(chǔ)知識(shí)做了詳細(xì)介紹,并附有代碼示例,希望能幫助學(xué)習(xí)AngularJS的同學(xué)
2016-08-08