Čo sú templateUrls a styleUrl v Angular?

Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.

Pomocou Angular môžete oddeliť stránky, dialógové okná alebo iné časti vašej aplikácie do komponentov. Komponenty v aplikácii Angular sa skladajú hlavne zo súborov HTML, CSS a TypeScript.

Do súboru TypeScript môžete pridať akúkoľvek logiku potrebnú na fungovanie používateľského rozhrania, ako je napríklad získavanie údajov zo servera.

Môžete tiež vykresliť HTML a CSS komponentu pomocou TypeScript, zadaním atribútov šablóny a štýlu. Na prepojenie s externými súbormi HTML alebo CSS môžete použiť šablónu templateUrl alebo styleUrl.

Čo je šablóna a templateUrl v Angular?

Keď ty vytvorte si vlastný komponent v Angular, môžete preň vykresliť HTML pomocou šablóny. Šablónu HTML môžete napísať dvoma spôsobmi:

• Kód HTML môžete napísať do šablóny v samotnom súbore TypeScript.
instagram viewer
• Kód HTML môžete napísať do externého súboru a prepojiť súbor TypeScript s týmto súborom HTML.

V novom komponente môžete nastaviť atribúty „template“ alebo „templateUrl“ v závislosti od toho, kde píšete svoje HTML.

1. Vytvor nová aplikácia Angular.
2. V termináli vašej aplikácie spustite ng generovať komponent príkaz na vytvorenie nového komponentu. Zavolajte nový komponent "o-stránke".

   generovať komponent o stránke

3. In app.component.html, nahraďte aktuálny kód značkami pre váš nový komponent:

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

4. Otvor about-page.component.ts súbor. Ak nemáte veľa HTML kódu, môžete použiť atribút template na jeho napísanie priamo do súboru TypeScript. Nahraďte dekorátor @Component nasledujúcim:

   @Component({
    selektor: 'app-about-page',
    šablóna: '<h2>O stránke</h2><br><p>Toto je vykreslenie HTML zo súboru TypeScript!</str>'
   })
   

5. Ak chcete zahrnúť šablónu s viacerými riadkami, môžete namiesto toho použiť úvodzovky:

   @Component({
    selektor: 'app-about-page',
    šablóna: „<h2>O stránke</h2>
   <br>
   <p>Toto je vykreslenie HTML zo súboru TypeScript!</str>`
   })

6. V termináli napíšte ng slúžiť skompilovať svoj kód a spustiť ho vo webovom prehliadači. Otvorte svoju aplikáciu na http://localhost: 4200/. Váš HTML kód zo súboru TypeScript sa vykreslí na stránke.
7. In about-page.component.ts, namiesto toho nahraďte výraz „template“ výrazom „templateUrl“. Zahrňte odkaz na externý súbor HTML komponentu. Ak máte zložitejší kód HTML, ktorý vyžaduje vlastný súbor, môžete použiť „templateUrl“.

   @Component({
    selektor: 'app-about-page',
    templateUrl: './about-page.component.html'
   })

8. Pridajte nejaký HTML kód do about-page.component.html súbor:

   <h2>O stránke</h2>
   <p>Toto je vykreslenie HTML zo súboru HTML!</str>

9. Vráťte sa do prehliadača alebo znova spustite ng slúžiť aby ste znova skompilovali svoj kód. Otvorte svoju aplikáciu na http://localhost: 4200/. Prehliadač teraz vykresľuje HTML z about-page.component.html súbor.

Čo sú štýly a adresy URL štýlu v Angular?

Podobne ako v HTML, môžete použiť buď "style" alebo "styleUrls" v závislosti od toho, kde sa rozhodnete uložiť CSS.

CSS môžete zahrnúť do kódu TypeScript, ak máte veľmi jednoduché deklarácie CSS. V opačnom prípade môžete použiť "styleUrls" na prepojenie súboru TypeScript s externým CSS, ktorý obsahuje viac štýlov.

1. Vo vašej predtým vytvorenej aplikácii Angular otvorte about-page.component.ts súbor. Pridajte do komponentu atribút „styles“. Do „štýlov“ pridajte svoj štýl CSS pre stránku:

   @Component({
    selektor: 'app-about-page',
    templateUrl: './about-page.component.html',
    štýly: ['h2 {farba: červená}','p {farba: zelená}']
   })

2. V termináli napíšte ng slúžiť skompilovať svoj kód a spustiť ho vo webovom prehliadači. Otvorte svoju aplikáciu na http://localhost: 4200/ na zobrazenie štýlu špecifikovaného v súbore TypeScript.
3. Ak máte veľa CSS, použite „styleUrls“ namiesto „styles“ na prepojenie súboru TypeScript s externým súborom CSS. In about-page.component.ts, nahraďte dekorátor @Component nasledujúcim:

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

4. Pridajte nejaký štýl CSS do about-page.component.css:

   h2 {
    farba: modrá
   }
   p {
    farba: tmavooranžová
   }

5. Vráťte sa do prehliadača alebo znova spustite ng slúžiť aby ste znova skompilovali svoj kód. Otvorte svoju aplikáciu na http://localhost: 4200/ na zobrazenie použitých štýlov z externého súboru CSS.

Vykresľovanie HTML komponentu v Angular

Teraz poznáte rôzne spôsoby, ako môžete vykresliť obsah HTML a CSS v aplikácii Angular. Na základe zložitosti HTML a CSS môžete určiť, ktorý prístup chcete použiť.

Ak máte záujem, môžete preskúmať, ako odovzdávať údaje medzi súbormi HTML a TypeScript komponentu Angular.