Kako stvoriti i koristiti vlastite komponente u Angularu

Komponenta je jedan od najvažnijih građevnih blokova Angular aplikacije. Komponente su višekratni dijelovi koda koji čine određene odjeljke vaše web stranice.

Primjeri komponenti koje možete izraditi uključuju manje elemente korisničkog sučelja kao što su gumbi ili kartice. Oni također mogu uključivati ​​veće elemente korisničkog sučelja kao što su bočne trake, navigacijske trake ili cijele stranice.

Korištenje komponenti u Angularu

Kada kreirate komponente u Angular aplikaciji, možete ih koristiti unutar drugih komponenti. Na primjer, možete stvoriti komponentu za veliki element UI kartice. Zatim možete koristiti ovu komponentu kao običnu HTML oznaku, gdje god želite:

<app-nova-komponenta></app-new-component>

Budući da su komponente bitovi koda za višekratnu upotrebu, također možete proslijediti varijable tako da podaci za svaku instancu budu različiti. Također možete kreirati komponente za stranice i prema tome možete usmjeriti do njih pomoću app-routing.module.ts datoteka.

Svoje komponente možete dizajnirati na temelju strukture vaše aplikacije i koliko želite odvojiti svoju funkcionalnost.

Kako stvoriti komponentu

Možete koristiti nggenerirati naredbu za stvaranje nove komponente.

1. Napravite novi Kutna primjena korištenjem novo ili otvorite postojeći.
2. Otvorite naredbeni redak ili terminal. Alternativno, ako imate otvorenu aplikaciju Angular u an IDE kao što je Visual Studio Code, možete koristiti ugrađeni terminal.
3. U terminalu idite na mjesto korijenske mape projekta. Na primjer:

   CD C:\Users\Sharl\Desktop\Angular-Application

4. Pokrenite ng generirati komponentu naredba, nakon čega slijedi naziv nove komponente:

   ng generirati komponentu ui-kartice

5. Nova komponenta će se kreirati u novoj mapi, unutar src/app imenik.

Kako dodati sadržaj u kutnu komponentu

Angular kreira svaku komponentu s HTML, CSS, TypeScript i datotekom specifikacije testiranja.

• The HTML datoteku pohranjuje HTML sadržaj komponente.
• The CSS datoteka pohranjuje styling komponente.
• The Datoteka specifikacije ispitivanja (spec.ts). pohranjuje sve testove jedinice za komponentu.
• The TypeScript datoteka pohranjuje logiku i funkcionalnost koja definira komponentu.

Dodajte dio sadržaja prilagođenoj komponenti ui-kartice.

1. Otvorena src/app/ui-card/ui-card.component.html, i ažurirajte HTML komponente. Provjerite imate li sliku s istim imenom u mapi pod nazivom src/aktive/slike u vašoj Angular aplikaciji. Zamijenite sadržaj ui-card.component.html sa sljedećim:

   <div klasa="kartica">
   <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
   <div klasa="kontejner">
   <h4 klasa="titula"> Plave planine </h4>
   <str> NSW, Australija </str>
   </div>
   </div>

2. Otvorena ui-card.component.css, i dodajte CSS sadržaj u komponentu:

   .kartica {
   kutija-sjena: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   širina: 400px;
   padding: 8px;
   margina: 24px;
   boja pozadine: bijeli dim;
   obitelj fontova: sans-serif;
   }
   .karticaimg {
   maksimalna širina: 400px;
   }
   .titula {
   padding-top: 16px;
   }
   .kontejner {
   padding: 2px 16px;
   }

3. The ui-card.component.ts datoteka već sadrži klasu za novu komponentu u koju možete dodati nove funkcije, logiku i funkcionalnost. Trebalo bi izgledati ovako:

   izvozrazreda UiCardComponent provodi OnInit {
   konstruktor() { }
    ngOnInit(): poništiti {
   // Ovdje dodajte malo logike koda
    }
   // Ili dodajte svoju logiku i funkcionalnost u nove funkcije
   }

Kako koristiti komponentu u HTML-u druge komponente

Unutra ui-card.component.ts, postoje tri atributa: selektor, templateUrl i styleUrl. TemplateUrl se odnosi na HTML komponente (i stoga povezuje na HTML datoteku). Atribut styleUrls odnosi se na CSS komponente i povezuje na CSS datoteku.

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

Kada koristite komponentu UI kartice u drugoj komponenti, koristit ćete naziv selektora "app-ui-card".

1. Prvo dodajte sadržaj na svoju web stranicu. Otvorena src/app/app.component.html i dodajte navigacijsku traku:

   <div klasa="navbar-zaglavlje">
   <klasa="nav-naslov"><b> Web Navbar </b></a>
   </div>

2. Dodajte malo stila svojoj navigacijskoj traci src/app/app.component.css:

   .navbar-header {
   boja pozadine: #07393C;
   padding: 30px 50px;
   prikaz: savijati;
   align-items: centar;
   obitelj fontova: sans-serif;
   }
   .nav-naslov {
   tekst-ukras: nijedan;
   boja: bijelim;
   veličina fonta: 16pt;
   }
   

3. Ispod navigacijske trake u app.component.html, dodajte novu UI karticu. Koristite naziv selektora "app-ui-card" kao HTML oznaku:

   <app-ui-card></app-ui-card>

4. Također možete ponovno koristiti komponentu uključivanjem oznake više puta. Da biste to učinili, zamijenite gornji redak da biste umjesto toga koristili više HTML oznaka app-ui-card:

   <div stil="zaslon: flex">
   <app-ui-card></app-ui-card>
   <app-ui-card></app-ui-card>
   <app-ui-card></app-ui-card>
   </div>

5. Pokrenite svoju Angular aplikaciju s terminala pomoću ng poslužiti naredbu i otvorite svoju web stranicu u web-pregledniku.

Kako prenijeti ulazne parametre u komponentu

Budući da se komponenta može ponovno koristiti, postoje atributi koje biste mogli promijeniti svaki put kada je koristite. U tom slučaju možete koristiti ulazne parametre.

1. Dodati Ulazni na popis uvoza na vrhu ui-card.component.ts:

   uvoz { Komponenta, ulaz, OnInit } iz '@kutni/core';

2. Zatim dodajte dvije ulazne varijable unutar UICardComponent razreda. To će vam omogućiti promjenu naziva lokacije i slike koja se prikazuje na kartici. Popuniti ngOnInit funkcija kao što je prikazano, za izgradnju puta do slike ili korištenje zadane vrijednosti:

   izvozrazreda UiCardComponent provodi OnInit {
   @Ulazni() Naziv lokacije: niz;
   @Ulazni() naziv slike: niz;
   konstruktor() { }
    ngOnInit(): poništiti {
   ako (ovaj.imageName) {
   ovaj.imageName = "./assets/images/" + ovaj.imageName;
    } drugo {
   ovaj.imageName = "./assets/images/blue-mountains.jpg";
    }
    }
   }
   

3. U ui-card.component.html, promijenite tvrdo kodiranu vrijednost "Plave planine" naslova 4 kako biste umjesto nje koristili ulaznu varijablu "locationName". Također promijenite tvrdi kod src atribut u oznaci slike za korištenje ulazne varijable "imageName":

   <div klasa="kartica">
   <img src="{{imageName}}" alt="Avatar">
   <div klasa="kontejner">
   <h4 klasa="titula">{{locationName? naziv lokacije: 'Plave planine'}}</h4>
   <str>NSW, Australija</str>
   </div>
   </div>

4. U app.component.html, izmijenite oznake "app-ui-card" tako da uključuju unose "locationName" i "imageName". Za svaki element UI kartice unesite drugu vrijednost. Provjerite postoje li slikovne datoteke unutar mape imovine/slike vaše Angular aplikacije.

   <div stil="zaslon: flex">
   <app-ui-card [locationName]="'Plave planine'" [ime slike]="'plave planine.jpg'"></app-ui-card>
   <app-ui-card [locationName]="'Sydney'" [ime slike]="'sydney.jpg'"></app-ui-card>
   <app-ui-card [locationName]="'Newcastle'" [ime slike]="'newcastle.jpg'"></app-ui-card>
   </div>

5. Pokrenite svoju Angular aplikaciju s terminala pomoću ng poslužiti naredbu i otvorite svoju web stranicu u web-pregledniku.

U ovom trenutku možete vidjeti pogrešku o tome da ta svojstva nemaju inicijalizator. Ako je tako, samo dodajte ili postavite "strictPropertyInitialization": netočno u vašem tsconfig.json.

Kako usmjeriti do nove komponente

Ako vaša komponenta predstavlja veliki dio vašeg web-mjesta kao što je nova stranica, možete također usmjeriti na tu komponentu.

1. Otvorena app-routing.module.ts. Uvezite komponentu UI kartice na vrh datoteke:

   uvoz { UiCardComponent } iz './ui-card/ui-card.component';

2. Dodajte put usmjeravanja u niz ruta:

   konst rute: Rute = [
   //... Bilo koje druge rute koje vam mogu zatrebati...
    { put: 'uicard', komponenta: UiCardComponent },
   ]

3. Zamijenite sav trenutni sadržaj u app.component.html uključiti samo navigacijsku traku i HTML oznaku izlaza usmjerivača. Utičnica usmjerivača omogućuje vam usmjeravanje između stranica. Dodajte hipervezu na navigacijsku traku, s atributom href koji odgovara stazi u nizu ruta:

   <div klasa="navbar-zaglavlje">
   <klasa="nav-naslov"><b> Web Navbar </b></a>
   <klasa="nav-a-link" href="/uicard"><b> UI kartica </b></a>
   </div>
   <usmjerivač-utičnica></router-outlet>
   

4. Dodajte malo stila novoj vezi kartice korisničkog sučelja, u app.component.css:

   .nav-a-link {
   tekst-ukras: nijedan;
   boja: #4b6569;
   veličina fonta: 14pt;
   margina-lijevo: 60px;
   font-weight: upaljač;
   }

5. Pokrenite svoju Angular aplikaciju s terminala pomoću ng poslužiti naredbu i otvorite svoju web stranicu u web-pregledniku. Veza će se pojaviti na navigacijskoj traci na web stranici.
6. Zabilježite URL adresu u svom web pregledniku. Prema zadanim postavkama, obično jest http://localhost: 4200/. Kada kliknete na vezu UI kartice, stranica će usmjeriti na http://localhost: 4200/uicard, i pojavit će se UI kartica.

Stvaranje komponenti u Angularu

Komponenta je jedan od glavnih građevnih blokova Angulara. Komponente vam omogućuju razbijanje različitih dijelova vaše web stranice na manje dijelove za višekratnu upotrebu. Možete napraviti bilo što u komponente, uključujući manje gumbe, kartice, veće bočne trake i navigacijske trake.

Također možete koristiti ulazne varijable za prosljeđivanje podataka kroz različite instance komponente. A možete usmjeriti do komponente koristeći URL staze.

Ako razvijate novu aplikaciju Angular, možda ćete morati izraditi navigacijsku traku kako bi se vaši korisnici kretali kroz vaše komponente. Posjedovanje responzivne navigacijske trake omogućuje vam da je vidite na različitim uređajima, na različitim veličinama zaslona.