Komponent on nurgarakenduse üks olulisemaid ehitusplokke. Komponendid on korduvkasutatavad koodibitid, mis moodustavad teie veebisaidi teatud jaotised.

Saate luua näiteks väiksemaid kasutajaliidese elemente, nagu nupud või kaardid. Need võivad sisaldada ka suuremaid kasutajaliidese elemente, nagu külgribad, navigeerimisribad või terved lehed.

Komponentide kasutamine nurgas

Kui loote Angular-rakenduses komponente, saate neid kasutada teistes komponentides. Näiteks saate luua komponendi suure kasutajaliidese kaardielemendi jaoks. Seejärel saate seda komponenti kasutada tavalise HTML-märgena kõikjal, kus soovite:

<rakendus-uus-komponent></app-new-component>

Kuna komponendid on korduvkasutatavad koodibitid, saate edastada ka muutujaid, et iga eksemplari andmed oleksid erinevad. Samuti saate luua lehtede jaoks komponente ja neid vastavalt marsruudi teha, kasutades app-routing.module.ts faili.

Saate oma komponente kujundada oma rakenduse struktuuri ja funktsioonide eraldamise järgi.

Kuidas komponenti luua

instagram viewer

Saate kasutada nggenereerida käsk uue komponendi loomiseks.

  1. Loo uus Nurga rakendus kasutades uus või avage olemasolev.
  2. Avage käsuviip või terminal. Teise võimalusena, kui teie Angular rakendus on avatud an IDE, näiteks Visual Studio Code, saate kasutada sisseehitatud terminali.
  3. Navigeerige terminalis projekti juurkausta asukohta. Näiteks:
    cd C:\Kasutajad\Sharl\Desktop\Angular-Application
  4. Käivitage ng genereerida komponenti käsk, millele järgneb uue komponendi nimi:
    ng genereerida komponendi ui-kaart
  5. Uus komponent luuakse uude kausta src/app kataloog.

Kuidas lisada nurgakomponendile sisu

Angular loob iga komponendi HTML-i, CSS-i, TypeScripti ja testimisspetsifikatsiooni failiga.

  • The HTML-faili salvestab komponendi HTML-i sisu.
  • The CSS-fail salvestab komponendi stiili.
  • The Testimise spetsifikatsiooni (spec.ts) fail salvestab kõik komponendi ühikutestid.
  • The TypeScript-fail salvestab komponendi määratleva loogika ja funktsionaalsuse.

Lisage kohandatud ui-kaardi komponendile sisu.

  1. Avatud src/app/ui-card/ui-card.component.htmlja värskendage komponendi HTML-i. Veenduge, et teil oleks sama nimega pilt kaustas nimega src/assets/images teie Angular rakenduses. Asenda sisu ui-card.component.html järgmisega:
    <div klass="kaardile">
    <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
    <div klass="konteiner">
    <h4 klass="pealkiri"> Sinimäed </h4>
    <lk> NSW, Austraalia </lk>
    </div>
    </div>
  2. Avatud ui-card.component.cssja lisage komponendile CSS-i sisu:
    .kaart {
    kast-vari: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    laius: 400px;
    polsterdus: 8px;
    marginaal: 24px;
    taustavärv: valge suits;
    font-perekond: sans-serif;
    }
    .kaartimg {
    maksimaalne laius: 400px;
    }
    

    .title {
    polsterdus-top: 16px;
    }
    .konteiner {
    polsterdus: 2px 16px;
    }
  3. The ui-card.component.ts fail sisaldab juba uue komponendi klassi, kuhu saate lisada uusi funktsioone, loogikat ja funktsionaalsust. See peaks välja nägema selline:
    eksportidaklass UiCardComponent rakendab OnInit {
    konstruktor() { }
     ngOnInit(): tühine {
    // Lisa siia koodiloogika
     }
    // Või lisage oma loogika ja funktsionaalsus uutesse funktsioonidesse
    }

Kuidas kasutada komponenti teise komponendi HTML-is

Sees ui-card.component.ts, on kolm atribuuti: selektor, templateUrl ja styleUrl. TemplateUrl viitab komponendi HTML-ile (ja seega lingib HTML-failile). Atribuut styleUrls viitab komponendi CSS-ile ja lingib CSS-failile.

@Component({
 valija: 'app-ui-card',
 templateUrl: './ui-card.component.html',
 styleUrls: ['./ui-card.component.css']
})

Kui kasutate kasutajaliidese kaardi komponenti mõnes teises komponendis, kasutate valija nime "app-ui-card".

  1. Esmalt lisage oma veebilehele sisu. Avatud src/app/app.component.html ja lisage navigeerimisriba:
    <div klass="navbar-päis">
    <klass ="nav-pealkiri"><b> Veebi navigeerimisriba </b></a>
    </div>
  2. Lisage oma navigeerimisribale veidi stiili src/app/app.component.css:
    .navbar-header {
    taustavärv: #07393C;
    polsterdus: 30px 50px;
    kuva: painduv;
    joondada-üksused: Keskus;
    font-perekond: sans-serif;
    }
    .nav-title {
    tekst-kaunistus: mitte ühtegi;
    värvi: valge;
    fondi suurus: 16pt;
    }
  3. Naviriba all app.component.html, lisage uus kasutajaliidese kaart. Kasutage HTML-märgena valija nime "app-ui-card".
    <rakendus-ui-kaart></app-ui-card>
  4. Samuti saate komponenti uuesti kasutada, lisades sildi mitu korda. Selleks asendage ülaltoodud rida, et kasutada selle asemel mitut rakenduse-ui-kaardi HTML-märgendit:
    <div style="ekraan: flex">
    <rakendus-ui-kaart></app-ui-card>
    <rakendus-ui-kaart></app-ui-card>
    <rakendus-ui-kaart></app-ui-card>
    </div>
  5. Käivitage oma Angular rakendus terminalist, kasutades teenida käsk ja avage oma veebisait veebibrauseris.

Kuidas edastada sisendparameetreid komponendile

Kuna komponent on korduvkasutatav, on atribuute, mida soovite võib-olla muuta iga kord, kui seda kasutate. Sel juhul saate kasutada sisendparameetreid.

  1. Lisama Sisend ülaosas asuvasse impordiloendisse ui-card.component.ts:
    importida { Komponent, sisend, OnInit } alates '@nurkne/core';
  2. Seejärel lisage sisestusse kaks sisendmuutujat UICardComponent klass. Need võimaldavad teil muuta kaardil kuvatavat asukoha nime ja pilti. Asustada ngOnInit funktsioon, nagu näidatud, et luua tee pildile või kasutada vaikeväärtust:
    eksportidaklass UiCardComponent rakendab OnInit {
    @Sisend() asukohanimi: string;
    @Sisend() pildinimi: string;
    konstruktor() { }
     ngOnInit(): tühine {
    kui (see.imageName) {
    see.imageName = "./assets/images/" + see.imageName;
     } muidu {
    see.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. sisse ui-card.component.html, muutke kõvakodeeritud pealkirja 4 "Blue Mountains" väärtust, et kasutada selle asemel sisendmuutujat "locationName". Vahetage ka kõvasti kodeeritud src atribuut pildimärgendis, et kasutada sisendmuutujat "imageName":
    <div klass="kaardile">
    <img src="{{imageName}}" alt="Avatar">
    <div klass="konteiner">
    <h4 klass="pealkiri">{{asukohanimi? asukohanimi: 'Sinimäed'}}</h4>
    <lk>NSW, Austraalia</lk>
    </div>
    </div>
  4. sisse app.component.html, muutke märgendeid "app-ui-card", et lisada sisendid "locationName" ja "imageName". Sisestage iga kasutajaliidese kaardi elemendi jaoks erinev väärtus. Veenduge, et pildifailid oleksid teie Angular-rakenduse varade/piltide kaustas.
    <div style="ekraan: flex">
    <app-ui-card [locationName]="'Sinimäed'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
    <app-ui-card [locationName]="'Sydney'" [imageName]="'sydney.jpg'"></app-ui-card>
    <app-ui-card [locationName]="'Newcastle'" [imageName]="'newcastle.jpg'"></app-ui-card>
    </div>
  5. Käivitage oma Angular rakendus terminalist, kasutades teenida käsk ja avage oma veebisait veebibrauseris.

Sel hetkel võite näha tõrketeadet selle kohta, et neil atribuutidel pole initsialiseerijat. Kui jah, siis lihtsalt lisage või määrake "strictPropertyInitialization": vale sinus tsconfig.json.

Kuidas marsruutida uue komponendi juurde

Kui teie komponent esindab suurt osa teie veebisaidist, näiteks uut lehte, saate ka selle komponendi juurde suunata.

  1. Avatud app-routing.module.ts. Importige faili ülaosas olev kasutajaliidese kaardi komponent:
    importida { UiCardComponent } alates './ui-card/ui-card.component';
  2. Lisage marsruutimise tee marsruutide massiivi:
    konst marsruudid: Marsruudid = [
    //... Kõik muud marsruudid, mida vajate ...
     { tee: 'uicard', komponent: UiCardComponent },
    ]
  3. Asendage kogu praegune sisu app.component.html et hõlmata ainult navigeerimisriba ja ruuteri väljundi HTML-märgend. Ruuteri väljund võimaldab teil marsruutida lehtede vahel. Lisage navigeerimisribale hüperlink, mille atribuut href vastab marsruutide massiivi teele:
    <div klass="navbar-päis">
    <klass ="nav-pealkiri"><b> Veebi navigeerimisriba </b></a>
    <klass ="nav-a-link" href="/uicard"><b> UI kaart </b></a>
    </div>
    <ruuter-väljund></router-outlet>
  4. Lisage uuele kasutajaliidese kaardi lingile veidi stiili app.component.css:
    .nav-a-link {
    tekst-kaunistus: mitte ühtegi;
    värvi: #4b6569;
    fondi suurus: 14pt;
    margin-vasak: 60px;
    font-weight: heledam;
    }
  5. Käivitage oma Angular rakendus terminalist, kasutades teenida käsk ja avage oma veebisait veebibrauseris. Link ilmub veebilehe navigeerimisribale.
  6. Pange tähele URL-i aadressi oma veebibrauseris. Vaikimisi on see tavaliselt http://localhost: 4200/. Kui klõpsate kasutajaliidese kaardi lingil, suunatakse leht aadressile http://localhost: 4200 / uicardja kuvatakse kasutajaliidese kaart.

Komponentide loomine nurgas

Komponent on Angulari üks peamisi ehitusplokke. Komponendid võimaldavad teil jagada veebisaidi erinevad jaotised väiksemateks korduvkasutatavateks osadeks. Saate teha millest iganes komponente, sealhulgas väiksemaid nuppe, kaarte, suuremaid külgribasid ja navigeerimisribasid.

Sisendmuutujaid saate kasutada ka andmete edastamiseks komponendi erinevate eksemplaride vahel. Ja saate komponendi juurde suunata URL-i teid kasutades.

Kui töötate välja uut Angulari rakendust, peate võib-olla looma navigeerimisriba, et kasutajad saaksid komponentides navigeerida. Tundliku navigeerimisriba olemasolu võimaldab teil seda vaadata erinevates seadmetes ja erineva suurusega ekraanidel.