Komponents ir viens no svarīgākajiem Angular lietojumprogrammas pamatelementiem. Komponenti ir atkārtoti lietojami koda biti, kas veido noteiktas jūsu vietnes sadaļas.

Veidojamo komponentu piemēri ietver mazākus lietotāja interfeisa elementus, piemēram, pogas vai kartes. Tie var ietvert arī lielākus lietotāja interfeisa elementus, piemēram, sānjoslas, navigācijas joslas vai veselas lapas.

Komponentu izmantošana leņķī

Veidojot komponentus lietojumprogrammā Angular, varat tos izmantot citos komponentos. Piemēram, varat izveidot komponentu lielam lietotāja interfeisa kartes elementam. Pēc tam varat izmantot šo komponentu kā parastu HTML tagu jebkurā vietā, kur vēlaties:

<app-new-component></app-new-component>

Tā kā komponenti ir atkārtoti lietojami koda biti, varat arī nodot mainīgos, lai dati par katru gadījumu būtu atšķirīgi. Varat arī izveidot lapu komponentus un attiecīgi novirzīt uz tiem, izmantojot app-routing.module.ts failu.

Varat izstrādāt komponentus, pamatojoties uz lietojumprogrammas struktūru un to, cik daudz vēlaties nošķirt savas funkcionalitātes.

instagram viewer

Kā izveidot komponentu

Jūs varat izmantot ngģenerēt komandu lai izveidotu jaunu komponentu.

  1. Izveidojiet jaunu Leņķiskais pielietojums izmantojot jauns vai atveriet esošu.
  2. Atveriet komandu uzvedni vai termināli. Alternatīvi, ja jūsu Angular lietojumprogramma ir atvērta a IDE, piemēram, Visual Studio Code, varat izmantot iebūvēto termināli.
  3. Terminālī dodieties uz projekta saknes mapes atrašanās vietu. Piemēram:
    cd C:\Users\Sharl\Desktop\Angular-Application
  4. Palaidiet ng ģenerēt komponentu komandu, kam seko jaunā komponenta nosaukums:
    ng ģenerēt komponentu UI-karti
  5. Jaunais komponents tiks izveidots jaunā mapē, iekšpusē src/app direktoriju.

Kā pievienot saturu leņķiskajam komponentam

Angular katru komponentu izveido ar HTML, CSS, TypeScript un testēšanas specifikācijas failu.

  • The HTML fails saglabā komponenta HTML saturu.
  • The CSS fails saglabā komponenta stilu.
  • The Testēšanas specifikācijas (spec.ts) fails saglabā visus komponenta vienību testus.
  • The TypeScript fails saglabā loģiku un funkcionalitāti, kas nosaka komponentu.

Pievienojiet saturu pielāgotajam lietotāja interfeisa kartes komponentam.

  1. Atvērt src/app/ui-card/ui-card.component.htmlun atjauniniet komponenta HTML. Pārliecinieties, vai mapē ar nosaukumu ir attēls ar tādu pašu nosaukumu src/assets/images savā Angular lietojumprogrammā. Aizstāt saturu ui-card.component.html ar sekojošo:
    <div klase="karti">
    <img src="./assets/images/blue-mountains.jpg" alt="Iemiesojums">
    <div klase="konteiners">
    <h4 klase="virsraksts"> Zilie kalni </h4>
    <lpp> NSW, Austrālija </lpp>
    </div>
    </div>
  2. Atvērt ui-card.component.cssun pievienojiet CSS saturu komponentam:
    .karte {
    kaste-ēna: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    platums: 400px;
    polsterējums: 8px;
    starpība: 24px;
    fona krāsa: baltie dūmi;
    fontu ģimene: sans serif;
    }
    .karteimg {
    maksimālais platums: 400px;
    }
    

    .title {
    polsterējums-top: 16px;
    }
    .konteiners {
    polsterējums: 2px 16px;
    }
  3. The ui-card.component.ts failā jau ir jaunā komponenta klase, kurā varat pievienot jaunas funkcijas, loģiku un funkcionalitāti. Tam vajadzētu izskatīties šādi:
    eksportētklasē UiCardComponent īsteno OnInit {
    konstruktors() { }
     ngOnInit(): nederīgs {
    // Šeit pievienojiet koda loģiku
     }
    // Vai arī pievienojiet savu loģiku un funkcionalitāti jaunās funkcijās
    }

Kā izmantot komponentu cita komponenta HTML

Iekšā ui-card.component.ts, ir trīs atribūti: selektors, templateUrl un styleUrl. TemplateUrl attiecas uz komponenta HTML (un līdz ar to ir saites uz HTML failu). Atribūts styleUrls attiecas uz komponenta CSS un saites uz CSS failu.

@Komponents({
 atlasītājs: 'app-ui-card',
 templateUrl: './ui-card.component.html',
 styleUrls: ['./ui-card.component.css']
})

Ja izmantojat UI kartes komponentu citā komponentā, tiks izmantots atlasītāja nosaukums “app-ui-card”.

  1. Vispirms pievienojiet savai tīmekļa lapai saturu. Atvērt src/app/app.component.html un pievienojiet navigācijas joslu:
    <div klase="navigācijas joslas galvene">
    <klase ="nav virsraksts"><b> Tīmekļa navigācijas josla </b></a>
    </div>
  2. Pievienojiet savai navigācijas joslai stilu src/app/app.component.css:
    .navbar-header {
    fona krāsa: #07393C;
    polsterējums: 30px 50px;
    displejs: flex;
    izlīdzināt vienumus: centrs;
    fontu ģimene: sans serif;
    }
    .nav-title {
    teksta dekorēšana: neviens;
    krāsa: balts;
    fonta izmērs: 16pt;
    }
  3. Zem navigācijas joslas app.component.html, pievienojiet jaunu lietotāja interfeisa karti. Izmantojiet “app-ui-card” atlasītāja nosaukumu kā HTML tagu:
    <app-ui-card></app-ui-card>
  4. Varat arī atkārtoti izmantot komponentu, iekļaujot tagu vairākas reizes. Lai to izdarītu, nomainiet iepriekš minēto rindiņu, lai tā vietā izmantotu vairākus app-ui-card HTML tagus:
    <div style="displejs: flex">
    <app-ui-card></app-ui-card>
    <app-ui-card></app-ui-card>
    <app-ui-card></app-ui-card>
    </div>
  5. Palaidiet savu Angular lietojumprogrammu no termināļa, izmantojot ng kalpot komandu un atveriet savu vietni tīmekļa pārlūkprogrammā.

Kā nodot ievades parametrus komponentam

Tā kā komponents ir atkārtoti lietojams, ir atribūti, kurus, iespējams, vēlēsities mainīt katru reizi, kad to lietojat. Šajā gadījumā varat izmantot ievades parametrus.

  1. Pievienot Ievade uz importa sarakstu augšpusē ui-card.component.ts:
    imports { Komponents, ievade, OnInit } no '@stūrains/core';
  2. Pēc tam pievienojiet divus ievades mainīgos iekšpusē UIcardComponent klasē. Tas ļaus jums mainīt atrašanās vietas nosaukumu un attēlu, kas tiek rādīts kartē. Aizpildiet ngOnInit funkciju, kā parādīts, lai izveidotu ceļu uz attēlu vai izmantotu noklusējuma vērtību:
    eksportētklasē UiCardComponent īsteno OnInit {
    @Ievade() atrašanās vietas nosaukums: virkne;
    @Ievade() attēla nosaukums: virkne;
    konstruktors() { }
     ngOnInit(): nederīgs {
    ja (šis.imageName) {
    šis.imageName = "./assets/images/" + šis.imageName;
     } cits {
    šis.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. In ui-card.component.html, mainiet cieto kodēto virsraksta 4 "Blue Mountains" vērtību, lai tā vietā izmantotu ievades mainīgo "locationName". Mainiet arī cieto kodu src atribūts attēla tagā, lai izmantotu ievades mainīgo "imageName":
    <div klase="karti">
    <img src="{{imageName}}" alt="Iemiesojums">
    <div klase="konteiners">
    <h4 klase="virsraksts">{{locationName? atrašanās vietas nosaukums: 'Zilie kalni'}}</h4>
    <lpp>NSW, Austrālija</lpp>
    </div>
    </div>
  4. In app.component.html, mainiet tagus "app-ui-card", lai iekļautu ievades "locationName" un "imageName". Katram lietotāja interfeisa kartes elementam ievadiet citu vērtību. Pārliecinieties, vai attēlu faili atrodas jūsu Angular lietojumprogrammas līdzekļu/attēlu mapē.
    <div style="displejs: flex">
    <app-ui-card [locationName]="'Zilie kalni'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
    <app-ui-card [locationName]="'Sidneja'" [imageName]="'sidneja.jpg'"></app-ui-card>
    <app-ui-card [locationName]="'Ņūkāsla'" [imageName]="'newcastle.jpg'"></app-ui-card>
    </div>
  5. Palaidiet savu Angular lietojumprogrammu no termināļa, izmantojot ng kalpot komandu un atveriet savu vietni tīmekļa pārlūkprogrammā.

Šajā brīdī var tikt parādīta kļūda par šiem rekvizītiem bez inicializētāja. Ja tā, vienkārši pievienojiet vai iestatiet "strictPropertyInitialization": nepatiess tavā tsconfig.json.

Kā pāriet uz jaunu komponentu

Ja jūsu komponents pārstāv lielu jūsu vietnes daļu, piemēram, jaunu lapu, varat arī novirzīt uz šo komponentu.

  1. Atvērt app-routing.module.ts. Importējiet lietotāja interfeisa kartes komponentu faila augšdaļā:
    imports { UiCardComponent } no './ui-card/ui-card.component';
  2. Pievienojiet maršrutēšanas ceļu maršrutu masīvam:
    konst maršruti: maršruti = [
    //... Jebkuri citi maršruti, kas jums var būt nepieciešami...
     { ceļš: 'uicard', komponents: UiCardComponent },
    ]
  3. Aizstāt visu pašreizējo saturu app.component.html lai iekļautu tikai navigācijas joslu un maršrutētāja izejas HTML tagu. Maršrutētāja kontaktligzda ļauj maršrutēt starp lapām. Pievienojiet hipersaiti navigācijas joslai ar atribūtu href, kas atbilst ceļam maršrutu masīvā:
    <div klase="navigācijas joslas galvene">
    <klase ="nav virsraksts"><b> Tīmekļa navigācijas josla </b></a>
    <klase ="nav-a-link" href="/uicard"><b> UI karte </b></a>
    </div>
    <maršrutētājs-kontaktligzda></router-outlet>
  4. Pievienojiet stilu jaunajai lietotāja interfeisa kartes saitei app.component.css:
    .nav-a-link {
    teksta dekorēšana: neviens;
    krāsa: #4b6569;
    fonta izmērs: 14pt;
    piemale-kreisais: 60px;
    fonta svars: šķiltavas;
    }
  5. Palaidiet savu Angular lietojumprogrammu no termināļa, izmantojot ng kalpot komandu un atveriet savu vietni tīmekļa pārlūkprogrammā. Saite parādīsies tīmekļa lapas navigācijas joslā.
  6. Ņemiet vērā URL adresi savā tīmekļa pārlūkprogrammā. Pēc noklusējuma tas parasti ir http://localhost: 4200/. Noklikšķinot uz lietotāja interfeisa kartes saites, lapa tiks novirzīta uz http://localhost: 4200/uicard, un tiks parādīta lietotāja interfeisa karte.

Komponentu izveide leņķiski

Komponents ir viens no galvenajiem Angular pamatelementiem. Komponenti ļauj sadalīt dažādas vietnes sadaļas mazākās, atkārtoti lietojamās daļās. Komponentos var izveidot jebko, tostarp mazākas pogas, kartītes, lielākas sānjoslas un navigācijas joslas.

Varat arī izmantot ievades mainīgos, lai nosūtītu datus dažādos komponenta gadījumos. Un jūs varat maršrutēt uz komponentu, izmantojot URL ceļus.

Ja izstrādājat jaunu lietotni Angular, iespējams, jums būs jāizveido navigācijas josla, lai lietotāji varētu pārvietoties pa jūsu komponentiem. Izmantojot adaptīvu navigācijas joslu, varat to skatīt dažādās ierīcēs un dažādos ekrāna izmēros.