Č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.

VYUŽITIE VIDEA DŇA

Č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.
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.

Vytvor nová aplikácia Angular .
V termináli vašej aplikácie spustite generovaného komponentu príkaz na vytvorenie nového komponentu. Zavolajte nový komponent „about-page“.
```
ng generate component about-page
```
In app.component.html, nahraďte aktuálny kód značkami pre svoj nový komponent:
```
<app-about-page></app-about-page>
```
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. Vymeňte dekoratér @Component za nasledujúci:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

Ak chcete zahrnúť viacriadkovú šablónu, môžete namiesto toho použiť úvodzovky:

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

V termináli napíšte slúžiť skompilovať svoj kód a spustiť ho vo webovom prehliadači. Otvorte svoju aplikáciu na čísle http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
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({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

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

<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>

Vráťte sa do prehliadača alebo znova spustite slúžiť aby ste znova skompilovali svoj kód. Otvorte svoju aplikáciu na čísle http://localhost:4200/. The browser now renders the HTML from the 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.

ako vynútiť zatvorenie okien

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({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
V termináli napíšte slúžiť skompilovať svoj kód a spustiť ho vo webovom prehliadači. Otvorte svoju aplikáciu na http://localhost:4200/ to view the styling specified in the TypeScript file.
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({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```

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

h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}

Vráťte sa do prehliadača alebo znova spustite slúžiť aby ste znova skompilovali svoj kód. Otvorte svoju aplikáciu na adrese http://localhost:4200/ to view the styles used from the external CSS file.

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.