Az alkatrész az Angular alkalmazás egyik legfontosabb építőköve. Az összetevők újrafelhasználható kódrészletek, amelyek a webhely bizonyos részeit alkotják.

A létrehozható összetevők közé tartoznak például a kisebb felhasználói felületelemek, például a gombok vagy a kártyák. Tartalmazhatnak nagyobb felhasználói felületelemeket is, például oldalsávokat, navigációs sávokat vagy egész oldalakat.

A komponensek használata szögben

Amikor összetevőket hoz létre egy Angular alkalmazásban, használhatja azokat más összetevőkben. Például létrehozhat egy összetevőt egy nagy felhasználói felület kártyaelemhez. Ezt az összetevőt ezután normál HTML-címkeként használhatja, bárhol, ahol tetszik:

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

Mivel az összetevők újrafelhasználható kódbitek, változókat is átadhat, így az egyes példányok adatai eltérőek. Az oldalakhoz komponenseket is létrehozhat, és ennek megfelelően irányíthatja őket a segítségével app-routing.module.ts fájlt.

Az összetevőket az alkalmazás felépítése és a funkcionalitás szétválasztása alapján tervezheti meg.

Hogyan készítsünk komponenst

Használhatja a ngparancsot generál új komponens létrehozásához.

  1. Újat csinálni Szögletes alkalmazás segítségével új vagy nyisson meg egy meglévőt.
  2. Nyissa meg a parancssort vagy a terminált. Alternatív megoldásként, ha az Angular alkalmazás egy IDE, például a Visual Studio Code, használhatja a beépített terminált.
  3. A terminálban navigáljon a projekt gyökérmappájának helyére. Például:
    CD C:\Users\Sharl\Desktop\Angular-Application
  4. Futtassa a ng összetevőt generál parancsot, majd az új összetevő nevét:
    ng összetevő ui-kártyát generál
  5. Az új összetevő egy új mappában jön létre, a mappán belül src/app Könyvtár.

Hogyan adjunk tartalmat az Angular komponenshez

Az Angular minden összetevőt HTML-, CSS-, TypeScript- és Testing Specification fájllal hoz létre.

  • Az HTML fájl az összetevő HTML-tartalmát tárolja.
  • Az CSS fájl tárolja az alkatrész stílusát.
  • Az Tesztelési specifikáció (spec.ts) fájl tárolja az alkatrész összes egységtesztjét.
  • Az TypeScript fájl tárolja az összetevőt meghatározó logikát és funkcionalitást.

Adjon hozzá némi tartalmat az egyéni ui-card összetevőhöz.

  1. Nyisd ki src/app/ui-card/ui-card.component.html, és frissítse az összetevő HTML-kódját. Győződjön meg arról, hogy van egy azonos nevű kép a nevű mappában src/assets/images az Angular alkalmazásban. Cserélje ki a tartalmát ui-card.component.html a következőkkel:
    <div class="kártya">
    <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
    <div class="tartály">
    <h4 osztály="cím"> Kék hegyek </h4>
    <p> NSW, Ausztrália </p>
    </div>
    </div>
  2. Nyisd ki ui-card.component.css, és adjon hozzá CSS-tartalmat az összetevőhöz:
    .kártya {
    doboz-árnyék: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    szélesség: 400px;
    párnázás: 8px;
    árrés: 24px;
    háttérszín: fehér füst;
    betűtípus család: sans-serif;
    }
    .kártyaimg {
    max szélesség: 400px;
    }
    

    .cím {
    padding-top: 16px;
    }
    .tartály {
    párnázás: 2px 16px;
    }
  3. Az ui-card.component.ts fájl már tartalmaz egy osztályt az új komponenshez, ahol új funkciókat, logikát és funkcionalitást adhat hozzá. Így kell kinéznie:
    exportosztály UiCardComponent megvalósítja OnInit {
    konstruktőr() { }
     ngOnInit(): üres {
    // Adjunk hozzá némi kódlogikát
     }
    // Vagy adja hozzá logikáját és funkcionalitását új függvényekben
    }

Az összetevő használata egy másik összetevő HTML-kódjában

Belül ui-card.component.ts, három attribútum létezik: Selector, templateUrl és styleUrl. A templateUrl az összetevő HTML-kódjára hivatkozik (és ezért a HTML-fájlra hivatkozik). A styleUrls attribútum az összetevő CSS-jére utal, és a CSS-fájlra hivatkozik.

@Összetevő({
 választó: 'app-ui-card',
 templateUrl: './ui-card.component.html',
 styleUrls: ['./ui-card.component.css']
})

Ha az UI-kártya összetevőt egy másik összetevőben használja, akkor az „app-ui-card” választó nevét fogja használni.

  1. Először adjon hozzá tartalmat weboldalához. Nyisd ki src/app/app.component.html és adjunk hozzá egy navigációs sávot:
    <div class="navbar-fejléc">
    <egy osztály="nav-title"><b> Web Navbar </b></a>
    </div>
  2. Adjon hozzá stílust a navigációs sávhoz src/app/app.component.css:
    .navbar-header {
    háttérszín: #07393C;
    párnázás: 30px 50px;
    kijelző: Flex;
    align-ites: központ;
    betűtípus család: sans-serif;
    }
    .nav-title {
    szöveg-dekoráció: egyik sem;
    szín: fehér;
    betűméret: 16pt;
    }
  3. A navigációs sáv alatt app.component.html, adjon hozzá egy új felhasználói felület kártyát. Használja az „app-ui-card” választó nevét HTML-címkeként:
    <app-ui-card></app-ui-card>
  4. Az összetevőt a címke többszöri hozzáadásával is újra felhasználhatja. Ehhez cserélje ki a fenti sort, hogy helyette több app-ui-card HTML-címkét használjon:
    <div style="kijelző: flex">
    <app-ui-card></app-ui-card>
    <app-ui-card></app-ui-card>
    <app-ui-card></app-ui-card>
    </div>
  5. Futtassa az Angular alkalmazást a terminálról a ng szolgálni parancsot, és nyissa meg webhelyét egy webböngészőben.

Hogyan lehet bemeneti paramétereket átadni a komponensnek

Mivel az összetevő újrafelhasználható, vannak olyan attribútumok, amelyeket érdemes minden használatkor módosítani. Ebben az esetben használhatja a bemeneti paramétereket.

  1. Hozzáadás Bemenet tetején található importlistára ui-card.component.ts:
    import { Komponens, Bemenet, OnInit } tól től '@szögletes/core';
  2. Ezután adjon hozzá két bemeneti változót a UIcardComponent osztály. Ezek lehetővé teszik a kártyán megjelenő helynév és kép módosítását. Népesíteni a ngOnInit az ábrán látható módon, a kép elérési útjának létrehozásához vagy alapértelmezett érték használatához:
    exportosztály UiCardComponent megvalósítja OnInit {
    @Bemenet() a helyszín neve: húr;
    @Bemenet() képnév: húr;
    konstruktőr() { }
     ngOnInit(): üres {
    ha (ez.imageName) {
    ez.imageName = "./assets/images/" + ez.imageName;
     } más {
    ez.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. Ban ben ui-card.component.html, módosítsa a 4. címsor „Blue Mountains” keménykódolt értékét, hogy helyette a „locationName” bemeneti változót használja. Változtasd meg a kemény kódolást is src attribútum a képcímkében az "imageName" bemeneti változó használatához:
    <div class="kártya">
    <img src="{{imageName}}" alt="Avatar">
    <div class="tartály">
    <h4 osztály="cím">{{a helyszín neve? a helyszín neve: 'Kék hegyek'}}</h4>
    <p>NSW, Ausztrália</p>
    </div>
    </div>
  4. Ban ben app.component.html, módosítsa az „app-ui-card” címkéket, hogy azok tartalmazzák a „locationName” és „imageName” bemeneteket. Minden felhasználói felület kártyaelemhez adjon meg más értéket. Győződjön meg arról, hogy a képfájlok az Angular alkalmazás tartalma/képmappájában találhatók.
    <div style="kijelző: flex">
    <app-ui-card [locationName]="'Kék hegyek'" [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. Futtassa az Angular alkalmazást a terminálról a ng szolgálni parancsot, és nyissa meg webhelyét egy webböngészőben.

Ezen a ponton hibaüzenet jelenhet meg arról, hogy ezeknek a tulajdonságoknak nincs inicializálója. Ha igen, csak adja hozzá vagy állítsa be "strictPropertyInitialization": hamis a tiédben tsconfig.json.

Új komponenshez való irányítás

Ha az összetevő a webhelye nagy részét képviseli, például egy új oldalt, akkor az adott összetevőhöz is eljuthat.

  1. Nyisd ki app-routing.module.ts. Importálja a UI kártya összetevőt a fájl tetején:
    import { UiCardComponent } tól től './ui-card/ui-card.component';
  2. Adjon hozzá egy útválasztási útvonalat az útvonalak tömbhöz:
    const útvonalak: Routes = [
    //... Egyéb útvonalak, amelyekre szüksége lehet...
     { elérési út: 'uicard', összetevő: UiCardComponent },
    ]
  3. Cserélje ki az összes jelenlegi tartalmat app.component.html hogy csak a navigációs sáv és a router-outlet HTML-címke szerepeljen. A router-kimenet lehetővé teszi az oldalak közötti útvonalat. Adjon hozzá egy hiperhivatkozást a navigációs sávhoz úgy, hogy a href attribútum megfeleljen az útvonalak tömbjében lévő elérési útnak:
    <div class="navbar-fejléc">
    <egy osztály="nav-title"><b> Web Navbar </b></a>
    <egy osztály="nav-a-link" href="/uicard"><b> UI kártya </b></a>
    </div>
    <router-kimenet></router-outlet>
  4. Adjon hozzá némi stílust az új felhasználói felület kártya hivatkozásához app.component.css:
    .nav-a-link {
    szöveg-dekoráció: egyik sem;
    szín: #4b6569;
    betűméret: 14pt;
    margó-bal: 60px;
    font-weight: öngyújtó;
    }
  5. Futtassa az Angular alkalmazást a terminálról a ng szolgálni parancsot, és nyissa meg webhelyét egy webböngészőben. A hivatkozás megjelenik a weboldal navigációs sávjában.
  6. Jegyezze fel az URL-címet a böngészőjében. Alapértelmezés szerint általában az http://localhost: 4200/. Ha rákattint a felhasználói felület kártya hivatkozására, az oldal a következőre fog irányítani http://localhost: 4200/uicard, és megjelenik a felhasználói felület kártya.

Alkotóelemek létrehozása szögben

A komponens az Angular egyik fő építőköve. Az összetevők lehetővé teszik, hogy webhelye különböző részeit kisebb, újrafelhasználható részekre bontsa fel. Bármit alkotóelemekké alakíthat, beleértve a kisebb gombokat, kártyákat, nagyobb oldalsávokat és navigációs sávokat.

A bemeneti változók segítségével adatokat is továbbíthat az összetevő különböző példányai között. Az összetevőhöz pedig URL-útvonalak segítségével is eljuthat.

Ha új Angular alkalmazást fejleszt, előfordulhat, hogy létre kell hoznia egy navigációs sávot, hogy a felhasználók navigálhassanak az összetevők között. Az érzékeny navigációs sáv lehetővé teszi a megtekintését különböző eszközökön, különböző képernyőméreteken.