Komponenta je jedním z nejdůležitějších stavebních kamenů aplikace Angular. Komponenty jsou opakovaně použitelné části kódu, které tvoří určité části vašeho webu.

Příklady komponent, které můžete vytvořit, zahrnují menší prvky uživatelského rozhraní, jako jsou tlačítka nebo karty. Mohou také zahrnovat větší prvky uživatelského rozhraní, jako jsou postranní panely, navigační panely nebo celé stránky.

Použití komponent v Angular

Když vytvoříte komponenty v aplikaci Angular, můžete je použít v jiných komponentách. Můžete například vytvořit komponentu pro velký prvek karty uživatelského rozhraní. Tuto komponentu pak můžete použít jako běžnou HTML značku, kdekoli budete chtít:

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

Protože komponenty jsou opakovaně použitelné bity kódu, můžete také předávat proměnné, takže data pro každou instanci jsou různá. Můžete také vytvářet komponenty pro stránky a můžete k nim odpovídajícím způsobem směrovat pomocí app-routing.module.ts soubor.

Své komponenty můžete navrhnout na základě struktury vaší aplikace a toho, jak moc chcete oddělit své funkce.

instagram viewer

Jak vytvořit komponentu

Můžete použít ngvygenerovat příkaz k vytvoření nové komponenty.

  1. Vytvoř nový Úhlová aplikace použitím ng nové nebo otevřít stávající.
  2. Otevřete příkazový řádek nebo terminál. Případně, pokud máte aplikaci Angular otevřenou v IDE, jako je Visual Studio Code, můžete použít vestavěný terminál.
  3. V terminálu přejděte do umístění kořenové složky projektu. Například:
    CD C:\Users\Sharl\Desktop\Angular-Application
  4. Spusťte ng generovat komponentu příkaz, za kterým následuje název nové součásti:
    generovat komponentní ui-kartu
  5. Nová komponenta se vytvoří v nové složce uvnitř src/app adresář.

Jak přidat obsah do úhlové součásti

Angular vytváří každou komponentu pomocí souboru HTML, CSS, TypeScript a Testing Specification.

  • The HTML soubor ukládá obsah HTML komponenty.
  • The CSS soubor ukládá styl komponenty.
  • The Soubor specifikace testování (spec.ts). ukládá všechny testy jednotek pro komponentu.
  • The Soubor TypeScript ukládá logiku a funkcionalitu, která definuje komponentu.

Přidejte nějaký obsah do vlastní komponenty ui-card.

  1. OTEVŘENO src/app/ui-card/ui-card.component.htmla aktualizujte HTML komponenty. Ujistěte se, že máte ve složce s názvem obrázek se stejným názvem src/assets/images ve vaší aplikaci Angular. Nahraďte obsah ui-card.component.html s následujícím:
    <třída div="Kartu">
    <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
    <třída div="kontejner">
    <třída h4="titul"> Modré hory </h4>
    <p> NSW, Austrálie </str>
    </div>
    </div>
  2. OTEVŘENO ui-card.component.cssa přidejte obsah CSS do komponenty:
    .Kartu {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    šířka: 400px;
    vycpávka: 8px;
    okraj: 24px;
    barva pozadí: bílý kouř;
    rodina písem: sans-serif;
    }
    .Kartuimg {
    max. šířka: 400px;
    }
    

    .titul {
    polstrování-top: 16px;
    }
    .kontejner {
    vycpávka: 2px 16px;
    }
  3. The ui-card.component.ts soubor již obsahuje třídu pro novou komponentu, do které můžete přidávat nové funkce, logiku a funkčnost. Mělo by to vypadat takto:
    vývoznítřída UiCardComponent nářadí OnInit {
    konstruktér() { }
     ngOnInit(): prázdnota {
    // Zde přidejte nějakou logiku kódu
     }
    // Nebo přidejte svou logiku a funkčnost do nových funkcí
    }

Jak používat komponentu v HTML jiné komponenty

Uvnitř ui-card.component.ts, existují tři atributy: selector, templateUrl a styleUrl. TemplateUrl odkazuje na HTML komponenty (a proto odkazuje na soubor HTML). Atribut styleUrls odkazuje na CSS komponenty a odkazuje na soubor CSS.

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

Když použijete komponentu UI Card v jiné komponentě, použijete název selektoru „app-ui-card“.

  1. Nejprve přidejte na svou webovou stránku nějaký obsah. OTEVŘENO src/app/app.component.html a přidejte navigační panel:
    <třída div="navbar-header">
    <třída ="nav-title"><b> Webová navigační lišta </b></A>
    </div>
  2. Dodejte svému navigačnímu panelu styl src/app/app.component.css:
    .navbar-header {
    barva pozadí: #07393C;
    vycpávka: 30px 50px;
    Zobrazit: flex;
    zarovnat-položky: centrum;
    rodina písem: sans-serif;
    }
    .nav-title {
    text-dekorace: žádný;
    barva: bílý;
    velikost písma: 16pt;
    }
  3. Pod navigační lištou dovnitř app.component.html, přidejte novou kartu uživatelského rozhraní. Jako značku HTML použijte název selektoru „app-ui-card“:
    <app-ui-card></app-ui-card>
  4. Komponentu můžete také znovu použít tím, že značku přidáte vícekrát. Chcete-li to provést, nahraďte výše uvedený řádek a použijte místo toho několik značek HTML karty app-ui-card:
    <div styl="displej: flex">
    <app-ui-card></app-ui-card>
    <app-ui-card></app-ui-card>
    <app-ui-card></app-ui-card>
    </div>
  5. Spusťte aplikaci Angular z terminálu pomocí ng sloužit a otevřete svůj web ve webovém prohlížeči.

Jak předat vstupní parametry do komponenty

Protože je komponenta znovu použitelná, existují atributy, které můžete chtít změnit při každém použití. V tomto případě můžete použít vstupní parametry.

  1. Přidat Vstup na seznam importů v horní části ui-card.component.ts:
    import { Component, Input, OnInit } z '@angular/core';
  2. Poté přidejte dvě vstupní proměnné dovnitř Komponenta UICard třída. Ty vám umožní změnit název umístění a obrázek, který se zobrazí na kartě. Zalidněte ngOnInit funkci, jak je znázorněno, vytvořte cestu k obrázku nebo použijte výchozí hodnotu:
    vývoznítřída UiCardComponent nářadí OnInit {
    @Vstup() název umístění: tětiva;
    @Vstup() název obrázku: tětiva;
    konstruktér() { }
     ngOnInit(): prázdnota {
    -li (tento.imageName) {
    tento.imageName = "./assets/images/" + tento.imageName;
     } jiný {
    tento.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. v ui-card.component.html, změňte pevně zakódovanou hodnotu nadpisu 4 „Modré hory“ tak, aby místo toho používala vstupní proměnnou „locationName“. Změňte také pevně zakódované src atribut ve značce obrázku použít vstupní proměnnou „imageName“:
    <třída div="Kartu">
    <img src="{{imageName}}" alt="Avatar">
    <třída div="kontejner">
    <třída h4="titul">{{název umístění? název umístění: 'Modré hory'}}</h4>
    <p>NSW, Austrálie</str>
    </div>
    </div>
  4. v app.component.html, upravte značky „app-ui-card“ tak, aby zahrnovaly vstupy „locationName“ a „imageName“. Pro každý prvek karty uživatelského rozhraní zadejte jinou hodnotu. Ujistěte se, že soubory obrázků existují ve složce aktiv/images vaší aplikace Angular.
    <div styl="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. Spusťte aplikaci Angular z terminálu pomocí ng sloužit a otevřete svůj web ve webovém prohlížeči.

V tomto okamžiku se může zobrazit chyba o tom, že tyto vlastnosti nemají žádný inicializátor. Pokud ano, stačí přidat nebo nastavit "strictPropertyInitialization": nepravda ve vašem tsconfig.json.

Jak nasměrovat na novou komponentu

Pokud vaše komponenta představuje velkou část vašeho webu, například novou stránku, můžete na tuto komponentu také nasměrovat.

  1. OTEVŘENO app-routing.module.ts. Importujte komponentu UI Card v horní části souboru:
    import { UiCardComponent } z './ui-card/ui-card.component';
  2. Přidejte cestu směrování do pole routes:
    konst trasy: Trasy = [
    //... Jakékoli další trasy, které můžete potřebovat...
     { cesta: 'uicard', komponenta: UiCardComponent },
    ]
  3. Nahradit veškerý aktuální obsah v app.component.html zahrnout pouze navigační panel a HTML značku router-outlet. Výstup routeru umožňuje směrování mezi stránkami. Přidejte hypertextový odkaz na navigační panel s atributem href odpovídajícím cestě v poli tras:
    <třída div="navbar-header">
    <třída ="nav-title"><b> Webová navigační lišta </b></A>
    <třída ="nav-a-link" href="/uicard"><b> UI Card </b></A>
    </div>
    <router-outlet></router-outlet>
  4. Přidejte nějaký styl do odkazu na novou kartu uživatelského rozhraní, in app.component.css:
    .nav-a-link {
    text-dekorace: žádný;
    barva: #4b6569;
    velikost písma: 14pt;
    okraj-levý: 60px;
    tloušťka písma: lehčí;
    }
  5. Spusťte aplikaci Angular z terminálu pomocí ng sloužit a otevřete svůj web ve webovém prohlížeči. Odkaz se zobrazí v navigační liště na webové stránce.
  6. Poznamenejte si URL adresu ve vašem webovém prohlížeči. Ve výchozím nastavení je to obvykle http://localhost: 4200/. Když kliknete na odkaz na kartu uživatelského rozhraní, stránka bude přesměrována na http://localhost: 4200/uicarda zobrazí se karta uživatelského rozhraní.

Vytváření komponent v Angular

Komponenta je jedním z hlavních stavebních kamenů Angular. Komponenty vám umožňují rozdělit různé části vašeho webu na menší, opakovaně použitelné části. Z čehokoli můžete vytvořit komponenty, včetně menších tlačítek, karet, větších postranních panelů a navigačních panelů.

Můžete také použít vstupní proměnné k předání dat mezi různé instance komponenty. A můžete směrovat ke komponentě pomocí cest URL.

Pokud vyvíjíte novou aplikaci Angular, možná budete muset vytvořit navigační panel, aby uživatelé mohli procházet vašimi komponentami. Díky responzivnímu navigačnímu panelu jej můžete prohlížet na různých zařízeních na různých velikostech obrazovky.