ஆங்குலர் சிக்னல்கள்
சிக்னல்கள் எதிர்வினை மாநிலம்: அவற்றை அழைப்பதன் மூலம் படிக்கவும் (எ.கா., count()), set()/update() உடன் புதுப்பிக்கவும், computed() உடன் பெறவும் மற்றும் effect() உடன் பக்க விளைவுகளை இயக்கவும்.
சிக்னல்கள் அடிப்படைகள்
சிக்னல்
நீங்கள் அழைப்பதன் மூலம் படிக்கும் மதிப்பு (எ.கா., count()). அதைப் புதுப்பித்தல் சார்புடையவர்களுக்கு அறிவிக்கிறது.
மாநிலம்
உள்ளூர் கூறு மாநிலத்திற்கு signal() ஐப் பயன்படுத்தவும்.
பெறப்பட்டது
படிக்க மட்டும் சூத்திரங்களுக்கு computed() ஐப் பயன்படுத்தவும்.
விளைவுகள்
சார்புகள் மாறும்போது பக்க விளைவுகளை இயக்க effect() ஐப் பயன்படுத்தவும்.
சிக்னல்கள் அடிப்படை எடுத்துக்காட்டு
import { signal, computed, effect } from '@angular/core';
const count = signal(0);
const double = computed(() => count() * 2);
effect(() => console.log('count =', count()));
count.update(n => n + 1);முக்கிய குறிப்புகள்:
- தொடர்புடையவை: தரவு பைண்டிங், சேவைகள் & DI மற்றும் மாற்றம் கண்டறிதல் ஆகியவற்றைப் பார்க்கவும்.
- உள்ளூர் கூறு மாநிலத்திற்கு சிக்னல்களைப் பயன்படுத்தவும்.
- தேவைப்படும் போது RxJS உடன் toSignal()/toObservable() மூலம் பாலம் அமைக்கவும்.
- பழைய சமநிலை: பட்டியல்களுக்கு, track உடன் @for ஐ விரும்பவும்; *ngFor உடன், அதே விளைவுக்கு trackBy ஐப் பயன்படுத்தவும்.
சிக்னல்களுடன் பணிபுரிதல்
.set() அல்லது .update() உடன் ஒரு சிக்னலைப் புதுப்பிக்கவும்.
ஒரு செயல்பாடு போன்று அழைப்பதன் மூலம் ஒரு சிக்னலைப் படிக்கவும்.
சிக்னல் செயல்பாடுகள்
const count = signal(0);
count.set(1);
count.update(n => n + 1);
console.log(count());முழுமையான எடுத்துக்காட்டு
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal, computed, effect } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Signals</h3>
<p>Count: {{ count() }}</p>
<p>Double: {{ double() }}</p>
<button (click)="inc()">Increment</button>
`
})
export class App {
count = signal(0);
double = computed(() => this.count() * 2);
constructor() {
effect(() => console.log('count changed', this.count()));
}
inc() { this.count.update(n => n + 1); }
}
bootstrapApplication(App);எடுத்துக்காட்டு விளக்கம்:
- signal(0): நீங்கள் அழைப்பதன் மூலம் படிக்கும் எதிர்வினை மாநிலத்தை உருவாக்குகிறது (எ.கா., count()).
- computed(() => ...): பிற சிக்னல்களிலிருந்து ஒரு படிக்க மட்டும் மதிப்பைப் பெறுகிறது (double()).
- effect(() => ...): சார்புகள் மாறும் போதெல்லாம் இயங்குகிறது (count() புதுப்பிப்புகளில் பதிவுகள்).
- update(n => n + 1): சிக்னலுக்கு எழுதுகிறது மற்றும் சார்புடையவர்களுக்கு அறிவிக்கிறது.
உதவிக்குறிப்புகள்:
- மாற்ற முடியாத-நட்பு: இடத்தில் மாற்றுவதற்குப் பதிலாக set/update இல் புதிய பொருள்கள்/வரிசைகளை உருவாக்குவதைப் பயன்படுத்தவும்.
- விளைவுகளைச் சிறியதாக வைக்கவும்: feedback loops தடுக்க effect() உள்ளே சிக்னல்களுக்கு எழுதுவதைத் தவிர்க்கவும்.
- மலிவாகக் கணக்கிடவும்: computed() ஐ தூய்மையாகவும் மலிவாகவும் வைத்திருக்கவும்; பிற சிக்னல்களிலிருந்து மட்டுமே பெறவும்.
பெறப்பட்ட மதிப்புகள் மற்றும் விளைவுகள்
படிக்க மட்டும் சூத்திரங்களை computed() இல் மூடவும்; சார்புகள் மாறும்போது மீண்டும் கணக்கிடுகிறது.
பதிவு செய்தல் அல்லது ஒத்திசைத்தல் போன்ற பக்க விளைவுகளுக்கு effect() ஐப் பயன்படுத்தவும்.
விளைவுகளை idempotent மற்றும் இலகுவாக வைத்திருக்கவும்.
பெறப்பட்ட மதிப்புகள் எடுத்துக்காட்டு
const a = signal(2);
const b = signal(3);
const sum = computed(() => a() + b());
effect(() => console.log('sum =', sum()));முழுமையான பெறப்பட்ட மதிப்பு எடுத்துக்காட்டு
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal, computed, effect } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Derived & Effects</h3>
<p>a: {{ a() }} | b: {{ b() }} | sum: {{ sum() }}</p>
<button (click)="incA()">inc a</button>
<button (click)="incB()">inc b</button>
`
})
export class App {
a = signal(2);
b = signal(3);
sum = computed(() => this.a() + this.b());
constructor() { effect(() => console.log('sum =', this.sum())); }
incA() { this.a.update(n => n + 1); }
incB() { this.b.update(n => n + 1); }
}
bootstrapApplication(App);எடுத்துக்காட்டு விளக்கம்:
- computed: a() அல்லது b() மாறும்போது sum() மீண்டும் கணக்கிடுகிறது.
- effect: sum() புதுப்பிப்புகளுக்கு எதிர்வினை (ஒவ்வொரு மாற்றத்திலும் பதிவுகள்).
- incA()/incB(): சிக்னல்களை அதிகரிக்க update ஐப் பயன்படுத்தவும், மீண்டும் கணக்கீட்டை இயக்கவும்.
குறிப்புகள்:
- பக்க-விளைவு computed ஐத் தவிர்க்கவும்: computed() ஐ தூய்மையாக வைத்திருக்கவும் (async/மாற்றங்கள் இல்லை).
- விளைவு வாழ்க்கை சுழற்சிகள்: effect() உள்ளே சுத்தம் செய்யவும் மற்றும் ஒவ்வொரு ஓட்டத்திலும் தேவையற்ற வேலையைத் தவிர்க்கவும்.
- இடைச்செயல்பாடு: stream APIs உடன் ஒருங்கிணைக்கும் போது toSignal()/toObservable() ஐப் பயன்படுத்தி RxJS உடன் பாலம் அமைக்கவும்.
RxJS இடைச்செயல்பாடு
டெம்ப்ளேட்-நட்பு வாசிப்புகளுக்கு Observable ஐ toSignal() உடன் சிக்னலாக மாற்றவும்.
stream APIs உடன் ஒருங்கிணைக்க ஒரு சிக்னலை toObservable() உடன் Observable ஆக மாற்றவும்.
RxJS இடைச்செயல்பாடு எடுத்துக்காட்டு
import { signal, computed, effect, toSignal, toObservable } from '@angular/core';
import { interval, map } from 'rxjs';
// Observable -> Signal
const seconds$ = interval(1000).pipe(map(n => n + 1));
const seconds = toSignal(seconds$, { initialValue: 0 });
// Signal -> Observable
const count = signal(0);
const count$ = toObservable(count);முக்கிய குறிப்புகள்:
- ஆரம்ப மதிப்புகள்: SSR மற்றும் முதல் வழங்கலுக்கு toSignal() க்கு எப்போதும் initialValue வழங்கவும்.
- உரிமையாளர்: Observable பக்கத்தில் சந்தாக்களை நிர்வகிக்கவும்; toSignal() தானாகவே teardown ஐக் கையாளுகிறது.
சிக்னல்கள் விரைவு குறிப்பு
| செயல்பாடு | தொடரியல் | விளக்கம் |
|---|---|---|
| உருவாக்கு | signal(initial) | ஆரம்ப மதிப்புடன் சிக்னலை உருவாக்குகிறது |
| படிக்க | count() | சிக்னலை ஒரு செயல்பாடு போல் அழைப்பதன் மூலம் படிக்கவும் |
| எழுது | set(value), update(fn) | சிக்னல் மதிப்பைப் புதுப்பிக்கிறது |
| பெறப்பட்டது | computed(fn) | பிற சிக்னல்களிலிருந்து பெறப்பட்ட மதிப்பை உருவாக்குகிறது |
| விளைவுகள் | effect(fn) | சிக்னல் மாறும்போது பக்க விளைவுகளை இயக்குகிறது |
| RxJS இடைச்செயல்பாடு | toSignal(observable, { initialValue }) | Observable ஐ சிக்னலாக மாற்றுகிறது |
| RxJS இடைச்செயல்பாடு | toObservable(signal) | சிக்னலை Observable ஆக மாற்றுகிறது |
ஜாஸிஃப் குழு மேம்போக்கு:
எல்லா புதிய ஆங்குலர் திட்டங்களுக்கும் சிக்னல்களைப் பயன்படுத்தவும். அவை மேம்பட்ட செயல்திறன், மேம்பட்ட வகை பாதுகாப்பு மற்றும் மேம்பட்ட மாநில மேலாண்மை ஆகியவற்றை வழங்குகின்றன. பழைய முறைகளுக்குப் பதிலாக எப்போதும் signal(), computed(), மற்றும் effect() ஐ விரும்பவும்.
பயிற்சி
ஒரு சிக்னலின் மதிப்பை எவ்வாறு படிப்பது?