سیگنال های زاویه ای – انجمن DEV

فریم ورک زاویه ای سیگنال ها یک مکانیسم واکنشی جدید است که به اجزا اجازه می دهد تا داده ها را بدون نیاز به اتصال صریح به اشتراک بگذارند. سیگنال ها توابعی با آرگومان صفر هستند که مقداری را برمی گردانند و می توان از آنها برای ایجاد جریان های داده قابل مشاهده استفاده کرد. هنگامی که یک سیگنال تغییر می کند، همه اجزایی که مشترک آن هستند از تغییر مطلع می شوند. این سیگنال‌ها را به ابزاری قدرتمند برای جدا کردن اجزا و واکنش‌پذیرتر کردن برنامه‌تان تبدیل می‌کند.

    This addition will roll out in Angular 16
    Current @latest stable is Angular 15

در اینجا برخی از مزایای استفاده از سیگنال های فریم ورک زاویه ای آورده شده است:

جداسازی اجزا: از سیگنال ها می توان برای جدا کردن اجزا از یکدیگر استفاده کرد. این بدان معنی است که اجزا می توانند داده ها را بدون نیاز به اتصال مستقیم به یکدیگر به اشتراک بگذارند. این باعث می شود برنامه شما ماژولارتر شده و نگهداری آن آسان تر شود.
واکنش پذیرتر کردن برنامه شما: از سیگنال ها می توان برای واکنش پذیرتر کردن برنامه شما استفاده کرد. این بدان معنی است که اجزاء قادر خواهند بود به تغییرات داده ها در زمان واقعی واکنش نشان دهند. این می تواند تجربه کاربری برنامه شما را بهبود بخشد.
کارآمدتر کردن برنامه شما: از سیگنال ها می توان برای کارآمدتر کردن برنامه شما استفاده کرد. این به این دلیل است که آنها فقط اجزایی را از تغییرات مطلع می کنند که مشترک آنها هستند. این می تواند تعداد به روز رسانی هایی را که برنامه شما باید انجام دهد کاهش دهد.

این یک راه خوب برای جدا کردن مؤلفه ها، واکنش پذیرتر کردن برنامه شما و کارآمدتر کردن برنامه شما است. انتظار می رود با Angular 16 عرضه شود.

نسخه ی نمایشی

در این کد آزمایشی، ما یک مؤلفه به نام «AppComponent» ایجاد می کنیم. جزء دارای یک فیلد ورودی، یک دکمه و یک پاراگراف است. فیلد ورودی به مقدار خاصیتی به نام “value” محدود شده است. این دکمه به روشی به نام updateValue متصل است که مقدار مقدار را روی “مقدار جدید” تنظیم می کند. پاراگراف مقدار فعلی “ارزش” را نشان می دهد.

هنگامی که کاربر یک مقدار جدید را در قسمت ورودی وارد می کند و روی دکمه کلیک می کند، مقدار مقدار به “مقدار جدید” به روز می شود. سپس پاراگراف برای نمایش مقدار جدید به روز می شود.

<app-root>
  <app-component>
    <h1>Signals</h1>
    <p>This component uses signals to update the text of the button when the value of the input changes.</p>
    <input type="text" [(value)]="value">
    <button (click)="value="New Value"">Update</button>
    <p>{{value}}</p>
  </app-component>
</app-root>

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  value="Initial Value";

  constructor() { }

  ngOnInit() {
    console.log(this.value);
  }

  updateValue() {
    this.value="New Value";
  }
}