Membawa anda memahami pengikatan dua hala dalam Angular10

Artikel berikut akan memperkenalkan anda kepada pengikatan dua hala dan lihat pada dua jenis pengikatan dua hala dalam Angular Saya harap ia akan membantu anda!

Terdahulu, kami telah mempelajari tentang pengikatan harta, pengikatan peristiwa dan penggunaan input dan output. Tiba masanya untuk mempelajari tentang pengikatan dua hala. Dalam bahagian ini, kami akan menggunakan @Input() dan @Output() untuk mempelajari tentang pengikatan dua hala. [Cadangan tutorial berkaitan: "tutorial sudut"]

Definisi: Pengikatan dua hala menyediakan cara untuk komponen dalam aplikasi berkongsi data. Gunakan pengikatan dua hala untuk mendengar acara dan mengemas kini nilai secara serentak antara komponen induk dan anak. (Malah, ia adalah penyederhanaan @Input() dan @Output())

Ikatan dua hala boleh dibahagikan secara kasar kepada dua jenis:

1. Pengikatan dua hala bagi komponen biasa

Jenis pengikatan dua hala ini boleh berlaku pada mana-mana elemen DOM Mari kita ketahui lebih lanjut mengenainya melalui contoh.

Buat komponen src/app/components/ sebagai subkomponen di bawah sizer:

// src/app/components/sizer/sizer.component.html
<div>
  <button class="btn btn-danger" (click)="dec()" title="smaller">-</button>
  <button class="btn btn-primary" (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  public size = 14;
  // ...
  dec() {
    this.size++;
  }
  inc() {
    this.size--;
  }
}

Halaman akan kelihatan seperti ini dan fungsi butang dilaksanakan:

Walau bagaimanapun, ini bukan hasil yang kita mahukan. Dan, melalui peristiwa klik butang komponen sizer, nilai perubahan dihantar kembali kepada komponen induk. sizesizersizeSeterusnya kita akan menggunakan pengetahuan sebelumnya untuk mengubah kod ( ialah pengenalan kepada prinsip pengikatan dua hala

):

Begitu juga Mencapai kesan yang kami inginkan:

// src/app/app.component.html
// 下面的$event就是子组件传过来的值（必须是$event）
<app-sizer [size]="appFontSize" (onSizeChange)="appFontSize = $event"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/app.component.ts
...
export class AppComponent {
  appFontSize = 14;
}

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  // 创建输入属性size，为number或字符串类型
  @Input() size: number | string;
  // 创建自定义事件onSizeChange，需要一个number类型的参数
  @Output() onSizeChange = new EventEmitter<number>();
  ....
  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(1);
  }
  resize(step: number) {
    // 设置字体大小为12～40之间的值
    this.size = Math.min(40, Math.max(12, +this.size + step));
    // 通过事件传值
    this.onSizeChange.emit(this.size);
  }
}

Walau bagaimanapun, adakah ini terlalu banyak masalah? Seterusnya, pengikatan dua hala kami secara rasmi muncul:

Sintaks pengikatan dua hala Angular ialah gabungan kurungan segi empat sama dan kurungan bulat
[()]

.

[] digunakan untuk pengikatan atribut, () digunakan untuk pengikatan peristiwa. Ubah suai kod berikut:

dan anda akan mendapati bahawa fungsi itu tidak terjejas.

// src/app/app.component.html
<app-sizer [(size)]="appFontSize"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  @Input() size: number | string;
  // 修改事件名,********必须是：属性名 + Change 形式*********
  @Output() sizeChange = new EventEmitter<number>();
  ....
  resize(step: number) {
    this.size = Math.min(40, Math.max(12, +this.size + step));
    this.sizeChange.emit(this.size);
  }
}

2. Ikatan dua hala dalam bentuk [(ngModel)]

Berdasarkan dua asas sebelumnya -Pengetahuan yang mengikat cara, sintaks

boleh dipecahkan kepada:

[(ngModel)]1.Atribut input bernama

ngModel2. bernama < Atribut keluaran 🎜>

ngModelChange

digunakan secara bersendirian untuk menggunakan elemen bentuk

. anda perlu memperkenalkan modul terbina dalam :

yang digunakan dalam komponen: FormsModule

// src/app/app.module.ts 
import {FormsModule} from '@angular/forms';
...
@NgModule({
  // ...
  imports: [
    // ...
    FormsModule
  ],
  // ...
})

Barisan kod di atas adalah bersamaan dengan:

<!-- src/app/app.component.html -->
<input type="text" [(ngModel)]="iptVal">
<p>input value is {{iptVal}}</p>

Ini sebenarnya sangat mudah, sama dengan kaedah penulisan dalam vue.

<input [value]="iptVal" (input)="iptVal = $event.target.value" />

Gunakan

dalam tag Letakkan kod di dalam tag :

<form> Walau bagaimanapun , kami akan mendapati bahawa penyemak imbas akan melaporkan ralat:

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

Ralat bermakna jika kita menggunakan

dalam borang

, kita perlu menambah < kepada 🎜>Sifat atau tetapan
formngModel Ubah suai kod: inputname[ngModelOptions]="{standalone: true}" atau:

atau:

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" name="appIput2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

dalam bentuk Semudah itu untuk menggunakan pengikatan dua hala dalam elemen Hanya beri perhatian untuk memperkenalkan modul

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{standalone: true}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

.

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{name: &#39;appIput2&#39;}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

Ringkasan:

FormsModule

1. Prinsip pengikatan dua hala sebenarnya adalah menggunakan digabungkan dengan

harus diperhatikan bahawa sintaks ialah [ (Nama atribut)] = "Nama atribut dalam komponen induk", ikat input dahulu, kemudian ikat output; 🎜>2. Dalam borang

Untuk menggunakan pengikatan dua hala, anda perlu memperkenalkan modul terbina dalam dahulu, dan kemudian menambah pada elemen @Input(). @Output()

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Belajar Pengaturcaraan! !

Atas ialah kandungan terperinci Membawa anda memahami pengikatan dua hala dalam Angular10. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!