Ako vytvoriť a používať svoje vlastné komponenty v Angular

Komponent je jedným z najdôležitejších stavebných kameňov aplikácie Angular. Komponenty sú opakovane použiteľné kúsky kódu, ktoré tvoria určité časti vašej webovej lokality.

Príklady komponentov, ktoré môžete vytvoriť, zahŕňajú menšie prvky používateľského rozhrania, ako sú tlačidlá alebo karty. Môžu zahŕňať aj väčšie prvky používateľského rozhrania, ako sú bočné panely, navigačné panely alebo celé stránky.

Používanie komponentov v Angular

Keď vytvoríte komponenty v aplikácii Angular, môžete ich použiť v iných komponentoch. Môžete napríklad vytvoriť komponent pre veľký prvok karty používateľského rozhrania. Tento komponent potom môžete použiť ako bežnú značku HTML, kdekoľvek chcete:

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

Keďže komponenty sú opakovane použiteľné bity kódu, môžete tiež odovzdať premenné, aby sa údaje pre každú inštanciu líšili. Môžete tiež vytvárať komponenty pre stránky a podľa toho k nim smerovať pomocou app-routing.module.ts súbor.

Svoje komponenty môžete navrhnúť na základe štruktúry vašej aplikácie a toho, do akej miery chcete oddeliť svoju funkčnosť.

Ako vytvoriť komponent

Môžete použiť ngvygenerovať príkaz na vytvorenie nového komponentu.

1. Vytvorte nový Uhlová aplikácia použitím ng nové alebo otvorte existujúci.
2. Otvorte príkazový riadok alebo terminál. Prípadne, ak máte aplikáciu Angular otvorenú v IDE, ako je Visual Studio Code, môžete použiť vstavaný terminál.
3. V termináli prejdite do umiestnenia koreňového priečinka projektu. Napríklad:

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

4. Spustite ng generovať komponent príkaz, za ktorým nasleduje názov nového komponentu:

   vygenerujte komponentnú kartu Ui

5. Nový komponent sa vytvorí v novom priečinku vo vnútri src/aplikácia adresár.

Ako pridať obsah do uhlového komponentu

Angular vytvára každý komponent pomocou súboru HTML, CSS, TypeScript a Testing Specification.

• The HTML súbor ukladá obsah HTML komponentu.
• The CSS súbor ukladá štýl komponentu.
• The Súbor špecifikácie testovania (spec.ts). ukladá všetky testy jednotiek pre komponent.
• The Súbor TypeScript ukladá logiku a funkčnosť, ktorá definuje komponent.

Pridajte nejaký obsah do vlastného komponentu karty ui.

1. OTVORENÉ src/app/ui-card/ui-card.component.htmla aktualizujte kód HTML komponentu. Uistite sa, že v priečinku s názvom máte obrázok s rovnakým názvom src/assets/images vo vašej aplikácii Angular. Nahradiť obsah ui-card.component.html s nasledujúcim:

   <trieda div="kartu">
   <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
   <trieda div="kontajner">
   <trieda h4="titul"> Modré hory </h4>
   <p> NSW, Austrália </str>
   </div>
   </div>

2. OTVORENÉ ui-card.component.cssa pridajte obsah CSS do komponentu:

   .karta {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   šírka: 400px;
   vypchávka: 8px;
   marža: 24px;
   farba pozadia: biely dym;
   font-family: sans-serif;
   }
   .kartaimg {
   max-šírka: 400px;
   }
   .názov {
   vypchávka-top: 16px;
   }
   .kontajner {
   vypchávka: 2px 16px;
   }

3. The ui-card.component.ts súbor už obsahuje triedu pre nový komponent, do ktorej môžete pridať nové funkcie, logiku a funkčnosť. Malo by to vyzerať takto:

   exporttrieda Komponent UiCard náradia OnInit {
   konštruktér() { }
    ngOnInit(): neplatné {
   // Tu pridajte nejakú logiku kódu
    }
   // Alebo pridajte svoju logiku a funkčnosť do nových funkcií
   }

Ako používať komponent v HTML iného komponentu

Vnútri ui-card.component.ts, existujú tri atribúty: selector, templateUrl a styleUrl. TemplateUrl odkazuje na HTML komponentu (a teda odkazuje na HTML súbor). Atribút styleUrls odkazuje na CSS komponentu a odkazuje na súbor CSS.

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

Keď použijete komponent UI Card v inom komponente, použijete názov selektora „app-ui-card“.

1. Najprv pridajte na svoju webovú stránku nejaký obsah. OTVORENÉ src/app/app.component.html a pridajte navigačnú lištu:

   <trieda div="navbar-header">
   <trieda ="nav-title"><b> Webový navigačný panel </b></a>
   </div>

2. Pridajte trochu štýlu do navigačnej lišty src/app/app.component.css:

   .navbar-header {
   farba pozadia: #07393C;
   vypchávka: 30px 50px;
   displej: flex;
   align-items: centrum;
   font-family: sans-serif;
   }
   .nav-title {
   text-dekorácia: žiadny;
   farba: biely;
   veľkosť písma: 16pt;
   }
   

3. Pod navigačnou lištou v app.component.html, pridajte novú kartu používateľského rozhrania. Ako značku HTML použite názov selektora „app-ui-card“:

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

4. Komponent môžete použiť aj opakovaným zahrnutím značky. Ak to chcete urobiť, nahraďte riadok vyššie a namiesto toho použite viacero značiek HTML karty app-ui:

   <div style="displej: flex">
   <app-ui-card></app-ui-card>
   <app-ui-card></app-ui-card>
   <app-ui-card></app-ui-card>
   </div>

5. Spustite svoju aplikáciu Angular z terminálu pomocou ng slúžiť a otvorte svoju webovú lokalitu vo webovom prehliadači.

Ako odovzdať vstupné parametre do komponentu

Keďže komponent je opätovne použiteľný, existujú atribúty, ktoré možno budete chcieť zmeniť pri každom použití. V tomto prípade môžete použiť vstupné parametre.

1. Pridať Vstup do zoznamu dovozov v hornej časti ui-card.component.ts:

   importovať { Component, Input, OnInit } od '@angular/core';

2. Potom pridajte dve vstupné premenné do Komponent UICard trieda. Tie vám umožnia zmeniť názov miesta a obrázok, ktorý sa zobrazí na karte. Naplniť ngOnInit postupujte podľa obrázka, vytvorte cestu k obrázku alebo použite predvolenú hodnotu:

   exporttrieda Komponent UiCard náradia OnInit {
   @Vstup() locationName: reťazec;
   @Vstup() názov obrázku: reťazec;
   konštruktér() { }
    ngOnInit(): neplatné {
   ak (toto.imageName) {
   toto.imageName = "./assets/images/" + toto.imageName;
    } inak {
   toto.imageName = "./assets/images/blue-mountains.jpg";
    }
    }
   }
   

3. In ui-card.component.html, zmeňte pevne zakódovanú hodnotu nadpisu 4 „Modré hory“ tak, aby namiesto toho používala vstupnú premennú „locationName“. Zmeňte aj pevný kód src atribút v značke obrázka na použitie vstupnej premennej „imageName“:

   <trieda div="kartu">
   <img src="{{imageName}}" alt="Avatar">
   <trieda div="kontajner">
   <trieda h4="titul">{{locationName? locationName: 'Modré hory'}}</h4>
   <p>NSW, Austrália</str>
   </div>
   </div>

4. In app.component.html, upravte značky „app-ui-card“ tak, aby obsahovali vstupy „locationName“ a „imageName“. Pre každý prvok karty používateľského rozhrania zadajte inú hodnotu. Uistite sa, že súbory obrázkov existujú v priečinku aktív/obrázkov vašej aplikácie Angular.

   <div style="displej: flex">
   <app-ui-card [locationName]="'Modré hory'" [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. Spustite svoju aplikáciu Angular z terminálu pomocou ng slúžiť a otvorte svoju webovú lokalitu vo webovom prehliadači.

V tomto bode sa môže zobraziť chyba o tom, že tieto vlastnosti nemajú inicializátor. Ak áno, stačí pridať alebo nastaviť "strictPropertyInitialization": nepravda v tvojom tsconfig.json.

Ako nasmerovať na nový komponent

Ak váš komponent predstavuje veľkú časť vašej webovej lokality, napríklad novú stránku, môžete tiež smerovať na tento komponent.

1. OTVORENÉ app-routing.module.ts. Importujte komponent karty používateľského rozhrania v hornej časti súboru:

   importovať { UiCardComponent } od './ui-card/ui-card.component';

2. Pridajte cestu smerovania do poľa routes:

   konšt trasy: Trasy = [
   //... Akékoľvek ďalšie trasy, ktoré budete potrebovať...
    { cesta: 'uicard', komponent: UiCardComponent },
   ]

3. Nahradiť všetok aktuálny obsah v app.component.html zahrnúť iba navigačný panel a značku HTML pre výstup smerovača. Výstup smerovača vám umožňuje smerovať medzi stránkami. Pridajte hypertextový odkaz na navigačný panel s atribútom href zodpovedajúcim ceste v poli trás:

   <trieda div="navbar-header">
   <trieda ="nav-title"><b> Webový navigačný panel </b></a>
   <trieda ="nav-a-link" href="/uicard"><b> UI Card </b></a>
   </div>
   <smerovač-zásuvka></router-outlet>
   

4. Pridajte nejaký štýl do nového odkazu na kartu používateľského rozhrania app.component.css:

   .nav-a-link {
   text-dekorácia: žiadny;
   farba: #4b6569;
   veľkosť písma: 14pt;
   ľavý okraj: 60px;
   font-weight: ľahší;
   }

5. Spustite svoju aplikáciu Angular z terminálu pomocou ng slúžiť a otvorte svoju webovú lokalitu vo webovom prehliadači. Odkaz sa zobrazí v navigačnom paneli na webovej stránke.
6. Poznamenajte si URL adresu vo svojom webovom prehliadači. Štandardne je to zvyčajne http://localhost: 4200/. Keď kliknete na odkaz na kartu používateľského rozhrania, stránka prejde na http://localhost: 4200/uicarda zobrazí sa karta používateľského rozhrania.

Vytváranie komponentov v Angular

Komponent je jedným z hlavných stavebných kameňov Angular. Komponenty vám umožňujú rozdeliť rôzne časti vašej webovej lokality na menšie, opakovane použiteľné časti. Z čohokoľvek môžete vytvoriť komponenty, vrátane menších tlačidiel, kariet, väčších bočných panelov a navigačných panelov.

Vstupné premenné môžete použiť aj na prenos údajov cez rôzne inštancie komponentu. A môžete smerovať ku komponentu pomocou ciest URL.

Ak vyvíjate novú aplikáciu Angular, možno budete musieť vytvoriť navigačnú lištu, aby používatelia mohli prechádzať vašimi komponentmi. Vďaka responzívnemu navigačnému panelu si ho môžete prezerať na rôznych zariadeniach na rôznych veľkostiach obrazovky.