مدخلات الإشارات model()

الإشارات تلتقي بالربط ثنائي الاتجاه

تعريف مدخل 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

تحقّق سريع

مراجعة