Signaalit mallipohjissa
Sitokaa signaaliarvot suoraan komponenttien mallipohjiin.
Signaalit mallipohjissa on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Signaalit mallipohjissa
Yksi signaalien parhaista puolista on se, että luette niitä suoraan mallipohjissa kutsumalla niitä aivan kuten TypeScriptissä. Async pipe -putkea ei tarvita.
Lukeminen interpolaatiossa
Kutsukaa mallipohjassa signaalia kaksoisaaltosulkeilla merkityn interpolaation sisällä, jotta sen arvo näytetään.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Async pipe -putkea ei tarvita
Observables-olion kanssa tarvitsitte async pipe -putkea tilauksen tekemiseen ja peruuttamiseen. Signaalit ovat synkronisia, joten kutsutte niitä yksinkertaisesti. Tilausta ei tarvitse peruuttaa.
Näkymien automaattiset päivitykset
Kun mallipohjassa luettu signaali muuttuu, Angular tietää mallipohjan olevan siitä riippuvainen ja päivittää vain kyseisen sidonnan. Tämä on hienojakoista reaktiivisuutta käytännössä.
Signaalien kutsuminen tapahtumankäsittelijöissä
Yhdistäkää tapahtumat komponentin metodeihin, jotka päivittävät signaaleja. Mallipohja hahmonnetaan uudelleen automaattisesti niiden sidontojen osalta, joihin muutos vaikuttaa.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signaalit ominaisuussidonnissa
Voitte kutsua signaalia missä tahansa sidonnassa, myös ominaisuus- ja attribuuttisidonnassa.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signaalit sisäänrakennetun ohjausvuon kanssa
Nykyaikaisissa mallipohjissa käytetään sisäänrakennettuja ohjausvulohkoja. Luette signaalin if-lohkossa kutsumalla sitä.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Lasketut signaalit mallipohjissa
Johdetut arvot sopivat erinomaisesti mallipohjiin. Laskettu signaali lasketaan uudelleen vain, kun sen lähteet muuttuvat, ja se luetaan samalla tavalla.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Lasketun signaalin lukeminen näkymässä
Lukekaa laskettu signaali mallipohjassa aivan kuten mikä tahansa signaali.
// template: <p>Total: {{ total() }}</p>Miksi tämä on tehokasta
Koska Angular seuraa tarkasti, mitkä mallipohjan lausekkeet lukevat mitäkin signaaleja, se voi ohittaa näkymän osien käsittelyn, jos ne eivät olleet riippuvaisia muuttuneesta signaalista.
Yleinen sudenkuoppa: sulkeiden unohtaminen
Jos kirjoitatte mallipohjassa count ettekä count(), näytätte itse signaalifunktion ettekä sen arvoa. Kutsukaa signaalia aina.
Pikatarkistus: mallipohjat
Miten signaalit näkyvät mallipohjissa?
Kertaus: signaalit mallipohjissa
Luette signaaleja mallipohjissa kutsumalla niitä sulkeilla. Async pipe -putkea ei tarvita eikä mitään tarvitse peruuttaa. Angular päivittää vain muuttuneesta signaalista riippuvat sidonnat, ja lasketut signaalit toimivat samalla tavalla. Olette suorittaneet signaalien perusteiden osuuden.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”Signaalit mallipohjissa” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Signaalit mallipohjissa”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Signaalit mallipohjissa”?
Sitokaa signaaliarvot suoraan komponenttien mallipohjiin. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Signaalit mallipohjissa”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Mitä signaalit ovat
- Signaalien luominen ja lukeminen
- Signaalien päivittäminen set- ja update-toiminnoilla
- Signaalit mallipohjissa