Co jsou templateUrls a styleUrl v Angular?

Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.

Pomocí Angular můžete oddělit stránky, dialogy nebo jiné části vaší aplikace do komponent. Komponenty v aplikaci Angular se skládají hlavně ze souborů HTML, CSS a TypeScript.

Do souboru TypeScript můžete přidat libovolnou logiku potřebnou pro fungování uživatelského rozhraní, jako je načítání dat ze serveru.

Můžete také vykreslit HTML a CSS komponenty pomocí TypeScript, zadáním atributů šablony a stylu. Můžete použít templateUrl nebo styleUrls k propojení s externími HTML nebo CSS soubory.

Co je šablona a templateUrl v Angular?

Když vás vytvořte si vlastní komponentu v Angular, můžete pro něj vykreslit HTML pomocí šablony. Šablonu HTML můžete napsat dvěma způsoby:

• HTML kód můžete napsat do šablony v samotném souboru TypeScript.
• Kód HTML můžete zapsat do externího souboru a propojit soubor TypeScript s tímto souborem HTML.

V nové komponentě můžete nastavit buď atributy "template" nebo "templateUrl" v závislosti na tom, kde píšete svůj HTML.

1. Vytvořit nová aplikace Angular.
2. V terminálu vaší aplikace spusťte soubor ng generovat komponentu příkaz k vytvoření nové komponenty. Nazvěte novou komponentu "about-page".

   vygenerovat komponentu about-page

3. v app.component.html, nahraďte aktuální kód značkami pro vaši novou komponentu:

   <app-about-page></app-about-page>

4. Otevři about-page.component.ts soubor. Pokud nemáte mnoho kódu HTML, můžete jej pomocí atributu template zapsat přímo do souboru TypeScript. Vyměňte dekorátor @Component za následující:

   @Komponent({
    volič: 'app-about-page',
    šablona: '<h2>O stránce</h2><br><p>Toto je vykreslování HTML ze souboru TypeScript!</str>'
   })
   

5. Pokud chcete zahrnout víceřádkovou šablonu, můžete místo toho použít zpětné uvozovky:

   @Komponent({
    volič: 'app-about-page',
    šablona: "<h2>O stránce</h2>
   <br>
   <p>Toto je vykreslování HTML ze souboru TypeScript!</str>`
   })

6. V terminálu zadejte ng sloužit zkompilovat váš kód a spustit jej ve webovém prohlížeči. Otevřete aplikaci na http://localhost: 4200/. Váš HTML kód ze souboru TypeScript se vykreslí na stránce.
7. v about-page.component.ts, místo toho nahraďte "template" "templateUrl". Zahrňte odkaz na externí soubor HTML součásti. Pokud máte složitější HTML kód, který vyžaduje vlastní soubor, můžete použít „templateUrl“.

   @Komponent({
    volič: 'app-about-page',
    templateUrl: './about-page.component.html'
   })

8. Přidejte nějaký HTML kód do about-page.component.html soubor:

   <h2>O stránce</h2>
   <p>Toto je vykreslování HTML ze souboru HTML!</str>

9. Vraťte se do prohlížeče nebo spusťte znovu ng sloužit znovu zkompilujte svůj kód. Otevřete aplikaci na http://localhost: 4200/. Prohlížeč nyní vykresluje HTML z about-page.component.html soubor.

Co jsou styly a styly URL v Angular?

Podobně jako v HTML můžete použít buď "style" nebo "styleUrls" v závislosti na tom, kam se rozhodnete uložit CSS.

Pokud máte velmi jednoduché deklarace CSS, můžete do kódu TypeScript zahrnout CSS. Jinak můžete použít "styleUrls" k propojení souboru TypeScript s externím CSS, který obsahuje více stylů.

1. V dříve vytvořené aplikaci Angular otevřete about-page.component.ts soubor. Přidejte ke komponentě atribut „styles“. Do "stylů" přidejte svůj styl CSS pro stránku:

   @Komponent({
    volič: 'app-about-page',
    templateUrl: './about-page.component.html',
    styly: ['h2 {barva: červená}','p {barva: zelená}']
   })

2. V terminálu zadejte ng sloužit zkompilovat váš kód a spustit jej ve webovém prohlížeči. Otevřete aplikaci na http://localhost: 4200/ pro zobrazení stylu zadaného v souboru TypeScript.
3. Pokud máte hodně CSS, použijte „styleUrls“ místo „styles“ k propojení souboru TypeScript s externím souborem CSS. v about-page.component.ts, nahraďte dekorátor @Component následujícím:

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

4. Přidejte nějaký styl CSS do about-page.component.css:

   h2 {
    barva: modrá
   }
   p {
    barva: tmavě oranžová
   }

5. Vraťte se do prohlížeče nebo spusťte znovu ng sloužit znovu zkompilujte svůj kód. Otevřete aplikaci na http://localhost: 4200/ pro zobrazení použitých stylů z externího souboru CSS.

Vykreslování HTML komponenty v Angular

Nyní znáte různé způsoby, jak můžete vykreslit obsah HTML a CSS v aplikaci Angular. Můžete určit, který přístup chcete použít, na základě složitosti HTML a CSS.

Máte-li zájem, můžete prozkoumat, jak předávat data mezi soubory HTML a TypeScript komponenty Angular.