อินพุตสัญญาณ model()

Signals พบกับการผูกแบบสองทาง

การประกาศอินพุต model

import { Component, model } from "@angular/core";

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

การผูกจากคอมโพเนนต์แม่

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

การอ่านค่า model

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

การเขียนค่าไปยัง model

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

อินพุต model ที่จำเป็น

import { model } from "@angular/core";

export class FieldComponent {
  value = model.required<string>();
}

การใช้ model ในแม่แบบ

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

ไม่ต้องสร้างเอาต์พุตเอง

model กับ input

// read-only:
label = input("");

// two-way writable:
value = model("");

ตัวนับที่ใช้ model

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

ควรเลือกใช้ model เมื่อใด

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน