<\/span><\/h3>\nAtidarykite fail\u0105 ir importuokite reikiamus modulius, tada sukurkite skaitiklio signal\u0105:<\/p>\n
import { Component } from '@angular\/core';\nimport { signal } from '@angular\/core';\n\n@Component({\n selector: 'app-root',\n template: `\n <div style=\"text-align:center\">\n <h1>Angular Signal Example<\/h1>\n <p>Count: {{ count() }}<\/p>\n <button (click)=\"increment()\">Increment<\/button>\n <button (click)=\"decrement()\">Decrement<\/button>\n <\/div>\n `,\n styleUrls: ('.\/app.component.css')\n})\nexport class AppComponent {\n count = signal(0);\n\n increment() {\n this.count.set(this.count() + 1);\n }\n\n decrement() {\n this.count.set(this.count() - 1);\n }\n}\n<\/code><\/pre>\n<\/span>Signal\u0173 metodai<\/span><\/h3>\n\n- \n
rinkinys<\/strong>: set<\/code> metodas naudojamas naujai signalo vertei nustatyti. Auk\u0161\u010diau pateiktame pavyzdyje increment<\/code> metodas padidina signalo vert\u0119 1 naudojant this.count.set(this.count() + 1)<\/code>.<\/p>\n<\/li>\n- \n
atnaujinti<\/strong>: update<\/code> \u0160is metodas leid\u017eia atnaujinti signalo vert\u0119 pagal jo dabartin\u0119 vert\u0119:<\/p>\nthis.count.update(value => value + 1);\n<\/code><\/pre>\n<\/li>\n- \n
Prenumeruoti<\/strong>: subscribe<\/code> metodas leid\u017eia u\u017esiprenumeruoti signalo pakeitimus:<\/p>\nthis.count.subscribe(value => {\n console.log('Count changed to', value);\n});\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<\/span>Prieiga prie signalo<\/span><\/h3>\nNor\u0117dami pasiekti signalo vert\u0119, turite j\u012f i\u0161kviesti kaip funkcij\u0105: count()<\/code>. Tai b\u016btina, nes \u201eSignal\u201c gr\u0105\u017eina funkcij\u0105, apvyniojan\u010di\u0105 dabartin\u0119 reik\u0161m\u0119, leid\u017eian\u010di\u0105 \u201eAngular\u201c sekti pakeitimus ir automati\u0161kai atnaujinti atitinkamus komponentus.<\/p>\n<\/span>Reaktyv\u016bs signalai<\/span><\/h2>\nVienas i\u0161 pagrindini\u0173 \u201eSignal\u201c privalum\u0173 yra galimyb\u0117 sukurti reaktyvius signalus, kurie automati\u0161kai atnaujinami pasikeitus priklausomyb\u0117ms. Panagrin\u0117kime pavyzd\u012f, kai turime du signalus, vaizduojan\u010dius ta\u0161ko koordinates, ir tre\u010di\u0105 signal\u0105, apskai\u010diuojant\u012f atstum\u0105 nuo prad\u017eios.<\/p>\n
<\/span>1 veiksmas: sukurkite koordina\u010di\u0173 signalus<\/span><\/h3>\nimport { Component } from '@angular\/core';\nimport { signal, computed } from '@angular\/core';\n\n@Component({\n selector: 'app-root',\n template: `\n <div style=\"text-align:center\">\n <h1>Reactive Signal Example<\/h1>\n <p>X: {{ x() }}, Y: {{ y() }}<\/p>\n <p>Distance from origin: {{ distance() }}<\/p>\n <button (click)=\"moveRight()\">Move Right<\/button>\n <button (click)=\"moveUp()\">Move Up<\/button>\n <\/div>\n `,\n styleUrls: ('.\/app.component.css')\n})\nexport class AppComponent {\n x = signal(0);\n y = signal(0);\n\n distance = computed(() => Math.sqrt(this.x() ** 2 + this.y() ** 2));\n\n moveRight() {\n this.x.set(this.x() + 1);\n }\n\n moveUp() {\n this.y.set(this.y() + 1);\n }\n}\n<\/code><\/pre>\n<\/span>Kas skai\u010diuojama?<\/span><\/h3>\ncomputed<\/code> yra funkcija, leid\u017eianti kurti reaktyvius skai\u010diavimus pagal kitus signalus. Gr\u0105\u017einta vert\u0117 computed<\/code> bus automati\u0161kai atnaujintas, kai pasikeis kuris nors jame nurodytas signalas. Auk\u0161\u010diau pateiktame pavyzdyje distance<\/code> yra apskai\u010diuojamas remiantis x<\/code> ir y<\/code> ir bus atnaujintas, kai pasikeis kuris nors i\u0161 \u0161i\u0173 signal\u0173.<\/p>\n<\/span>Asinchronin\u0117s operacijos su signalu<\/span><\/h2>\nSignalas taip pat gali b\u016bti naudojamas valdyti b\u016bsen\u0105, kai atliekamos asinchronin\u0117s operacijos, pvz., gaunami duomenys i\u0161 API.<\/p>\n