目錄

• 雙向繫結原理
• ngModel
• 效果圖
• 自定義雙向繫結屬性
• 元件-html
• 元件-ts
• 外部使用
• 效果圖
• 總結

雙向繫結原理

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

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

[] 進行屬性繫結，() 進行事件繫結。

名稱規則為 [輸入名] + Change。

• 屬性繫結(@Input-輸入) - 設定特定的元素屬性。
http://www.cppcns.com
• 事件繫結(@Output-輸出) - 偵聽元素更改事件。

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

ngModel

與表單元素進行雙向繫結

import { Component,OnInit } from '@angular/core';
@Component({
  selector: 'app-bind',template: `
    <div>
      <div>NamejYUgkd: {{ 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.s']
})
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-www.cppcns.cominner [(value)]="name"></app-inner>
    </div>
  `
})
export class OuterComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

效果圖

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!