Saate oma Angular-projektis HTML-ile direktiive lisada. Mõned juhivad teie märgistuse struktuuri, teised aga keskenduvad atribuutidele.

Selles artiklis käsitletakse kuut kõige levinumat Angular direktiivi: ngFor, ngIf, ngClass, ngStyle, ngModel ja ngSwitch.

Mis on nurkdirektiivid?

Angular-direktiivid võimaldavad kasutada if-lauseid ja for-silmuseid ning lisada Angular-projekti HTML-koodile muud käitumist.

instagram viewer
direktiiv Kirjeldus
*ngKui Saate kasutada ngIfi, kui soovite, et teatud HTML-i plokke kuvataks ainult siis, kui need vastavad teatud tingimustele. Näiteks kui teil oli hüpikaknaga vorm, mis kuvatakse pärast seda, kui kasutaja on teatud väljale sisendi sisestanud.
*ngFor Võite kasutada ngFori, kui teil on vaja teatud plokki mitu korda korrata. Näiteks kui teil oli üksuste loend ja teil oli vaja kuvada iga üksuse jaoks div.
*ngKlass See lisab klassi kasutades tingimusliku stiili. Kui if-lause vastab tingimusele, rakendab see määratud klassi.
*ngStiil See lisab tingimusliku reasisese stiili. Kui if-lause vastab tingimusele, rakendab see määratud stiile.
*ngMudel See võimaldab teil teha kahesuunalist sidumist. See tähendab, et saate HTML- ja TypeScript-faili vahel andmeid mõlemas suunas edastada. Näiteks saate atribuudi väärtuse edastada TypeScript-failist HTML-faili ja vastupidi.
*ngSwitch See võimaldab paljude väärtuste kontrollimiseks lisada paljude juhtudega lülitilause. Juhtumite põhjal kuvatakse teatud HTML-i elemente.

Struktuurijuhised hõlmavad HTML-i elementide struktuuri. Nende hulka kuuluvad ngIf, ngFor ja ngSwitch. Atribuutide juhised hõlmavad HTML-i elementide omaduste muutmist. Nende hulka kuuluvad ngStyle, ngClass ja ngModel.

Kuidas ngIfi kasutada

ngIfi kasutamiseks vajate konkreetse HTML-i elemendi kuvamiseks tingimust, mille väärtus on tõene.

  1. Lisage oma TypeScript-faili kaks muutujat. Selles näites on muutuja noPlaylists ja muutuja esitusloendite salvestamiseks. See muutuja on tõene, kui esitusloendite massiivi pikkus on 0.
    noPlaylists: tõeväärtus = false;
    esitusloendid: mis tahes = [];
    konstruktor() { }
     ngOnInit(): void {
     if (this.playlists.length 0) {
     this.noPlaylists = tõsi;
     }
    }
  2. Lisage HTML-i lause *ngIf. Kui noPlaylists on tõene, kuvatakse allolevas ajavahemikus sisalduv veateade. Vastasel juhul ei lähe. Saate rakendada ngIfi erinevat tüüpi HTML-i sildid.
    

    Esitusloendeid pole saadaval.
  3. Kui-lausele komponendi "else" lisamiseks peate malliplokki lisama HTML-koodi osa "else" jaoks.
    

    Esitusloendeid pole saadaval.
    

    


    

    Esitusloendid leitud.

Kuidas ngFori kasutada

Kui teil on vaja lehel teatud arvu plokke korrata, saate kasutada käskkirja ngFor.

  1. TypeScript-failis lisage massiivi üksused.
    esitusloendid: mis tahes = [
     {"name": "Rock", "numberOfSongs": 5},
     {"name": "Kaasaegne", "numberOfSongs": 9},
     {"name": "Populaarne", "numberOfSongs": 14},
     {"name": "Akustiline", "numberOfSongs": 3},
     {"name": "Pulmalaulud", "numberOfSongs": 25},
     {"name": "Metal", "numberOfSongs": 0},
    ];
  2. Lisage HTML-faili lause *ngFor.
    Esitusloendid leitud.
    

    

    {{esitusloend.nimi}}
    {{playlist.numberOfSongs}} lugu
    ngFori sees saate viidata igale massiivi objektile, kasutades muutujat "esitusloend". "playlist.name" ja "playlist.numberOfSongs" prindib mõlemad atribuudid sisestusse silt.

Kuidas ngClassi kasutada

Saate muuta stiiliklassi, mida konkreetne div kasutab tingimuse alusel.

  1. Lisage CSS-faili kaks erineva stiiliga klassi. Saate lisada mis tahes CSS-stiil näiteks erinevad taustavärvid.
    .songs {
     taustavärv: #F7F5F2;
    }
    .noSongs {
     taustavärv: #FFA8A8;
    }
  2. Lisage eelmise sammu for-tsüklisse ngClassi atribuudi direktiiv. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" kasutab sama kolmekordne operaator, mis on JavaScript ja muud keeled.
    

    

    {{esitusloend.nimi}}
    {{playlist.numberOfSongs}} lugu
    Kui lugude arv on suurem kui null, rakendab see divisjonile klassi "laulud". See annab div-le halli taustavärvi. Vastasel juhul, kui lugude arv on null, rakendab see divisjonile klassi "noSongs". See annab div-le punase taustavärvi.

Kuidas ngStyle'i kasutada

ngClassi kasutamise asemel saate kasutada ngStyle'i, kui soovite klassi kaudu stiilimise asemel rakendada reassisest stiili.

  1. Muutke ngClass eelmisest etapist, et kasutada selle asemel ngStyle'i.
    

    {{esitusloend.nimi}}
    {{playlist.numberOfSongs}} lugu

  • Kui teil on vaja rakendada rohkem kui ühte tekstisisest stiili, saate iga stiili eraldada komaga.
    [ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'värv': playlist.numberOfSongs > 0? 'must': 'tumesinine' }"

    • Kuidas ngModelit kasutada

    Kahesuunaliseks sidumiseks saate kasutada ngModelit. See tähendab, et saate atribuudi väärtuse edastada nii HTML- kui ka TypeScript-failide vahel.

    Oletame näiteks, et teil on HTML-failis sisendelement, mis kasutab ngModelit. Atribuut ngModel on TypeScript-failis seotud muutujaga. Kui sisestate sisendisse väärtuse, värskendab see muutujat TypeScript-failis.

    TypeScript-failis atribuudis tehtud muudatused kajastuvad ka HTML-is, kui muud div-d kasutavad seda muutujat.

    1. Lisage failis app.module.ts FormsModule faili ülaosas olevatesse importidesse ja ka impordi massiivi.
      import { FormsModule } kohast '@angular/forms';
      @NgModule({
       import: [
       ...
       Vormide moodul
       ]
      })
    2. Lisage TypeScript-faili atribuut, et jälgida, millal kasutaja esitusloendit ümber nimetab.
      esitusloendite ümbernimetamine: tõeväärtus = false;
    3. Muutke esitusloendite muutuja avalikuks, et see oleks juurdepääsetav, kui kasutate ngModelit HTML-failis.
      avalikud esitusloendid: mis tahes = [
       ...
      ];
    4. Lisage HTML-faili kaks nuppu, mis võimaldavad teil iga esitusloendi ümber nimetada või ümbernimetamise tühistada.

    5. Lisage iga esitusloendi lahtrisse sisestuskast. Sisend on nähtav ainult siis, kui klõpsate nupul Esitusloendi ümbernimetamine nuppu. Sellel sisestuskastil on ngModel, mis on seotud failiga "playlist.name".

      Kui sisestate sisestuskasti uue nime, uuendatakse esitusloendi.nimi TypeScripti failis. See värskendab ka teisi HTML-faili dive, mis kasutavad esitusloendi.nimi.

    Kuidas ngSwitchi kasutada

    Funktsiooni ngSwitch saate kasutada teatud elementide kuvamiseks lüliti korpuse juhtumite alusel.

    1. Lisage esitusloendite massiivi objektidele uus atribuut "reiting". See atribuut võib olla mis tahes arv vahemikus 0 kuni 5 (kaasa arvatud).
      avalikud esitusloendid: mis tahes = [
       {"name": "Rock", "numberOfSongs": 5, "rating": 5},
       {"name": "Kaasaegne", "numberOfSongs": 9, "rating": 1},
       {"name": "Populaarne", "numberOfSongs": 14, "rating": 5},
       {"name": "Akustiline", "numberOfSongs": 3, "rating": 4},
       {"name": "Pulmalaulud", "numberOfSongs": 25, "rating": 5},
       {"name": "Metal", "numberOfSongs": 0, "rating": 0},
       ];
    2. Lisage esitusloendi lugude nime ja arvu alla lüliti. Esitusloendi reitingunumbri põhjal kuvatakse esitusloendis õige arv tärni.
      

      {{esitusloend.nimi}}
      {{playlist.numberOfSongs}} lugu
      

      

      

      ★
      

      ★★
      

      ★★★
      

      ★★★★
      

      ★★★★★
      

      Hinnanguid pole

    Angulari abil saate rohkem teada

    Nüüd olete õppinud nurkdirektiivide põhitõdesid, sealhulgas ngIfi, ngFori, ngClassi, ngStyle'i, ngModeli ja ngSwitchi kasutamist. Saate neid kombineerida, et luua keerukamaid kasutajaliideseid. Angulari kohta saate veel palju uurida ja õppida, olenemata sellest, kas olete algaja või edasijõudnu.

    8 parimat nurgakursust algajatele ja edasijõudnutele

    Loe edasi

    JagaSäutsJagaMeil

    Seotud teemad

    • Programmeerimine
    • Programmeerimine
    • JavaScript
    • HTML
    • CSS

    Autori kohta

    Sharlene Von Drehnen (5 artiklit avaldatud)

    Sharlene on MUO tehniline kirjanik ja töötab täiskohaga ka tarkvaraarendusega. Tal on IT bakalaureusekraad ning varasem kogemus kvaliteedi tagamise ja ülikooli juhendamise alal. Sharlene armastab mängida ja klaverit mängida.

    Veel Sharlene Von Drehnenilt

    Liituge meie uudiskirjaga

    Liituge meie uudiskirjaga tehniliste näpunäidete, arvustuste, tasuta e-raamatute ja eksklusiivsete pakkumiste saamiseks!

    Tellimiseks klõpsake siin