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ā)輸出事件-輸出數(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 { }
}