angular雙向綁定的示例分析

這篇文章主要為大家展示了“angular雙向綁定的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“angular雙向綁定的示例分析”這篇文章吧。

雙向綁定原理

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

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

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

名稱規則為 [輸入名] + 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"  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  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){
    // 觸發輸出事件-輸出數據
    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 { }
}

效果圖

以上是“angular雙向綁定的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！