Ce sunt templateUrls și styleUrls în Angular?

Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.

Folosind Angular, puteți separa paginile, casetele de dialog sau alte secțiuni ale aplicației dvs. în componente. Componentele unei aplicații Angular sunt formate în principal din fișiere HTML, CSS și TypeScript.

În fișierul TypeScript, puteți adăuga orice logică necesară pentru ca interfața de utilizare să funcționeze, cum ar fi preluarea datelor de pe un server.

De asemenea, puteți reda HTML și CSS ale componentei folosind TypeScript, specificând șablonul și atributele de stil. Puteți folosi templateUrl sau styleUrls pentru a face legătura la fișiere HTML sau CSS externe.

Ce este șablonul și templateUrl în Angular?

Cand tu creați-vă propria componentă în Angular, puteți reda HTML-ul pentru acesta folosind un șablon. Există două moduri prin care puteți scrie șablonul HTML:

• Puteți scrie codul HTML într-un șablon în fișierul TypeScript în sine.
• Puteți scrie codul HTML într-un fișier extern și puteți lega fișierul TypeScript la acest fișier HTML.

Într-o componentă nouă, puteți seta fie atributele „șablon”, fie „templateUrl”, în funcție de locul în care scrieți codul HTML.

1. Creeaza o noua aplicație Angular.
2. În terminalul aplicației dvs., rulați ng genera componentă comandă pentru a crea o nouă componentă. Apelați noua componentă „about-page”.

   ng generează componenta despre pagină

3. În app.component.html, înlocuiți codul curent cu etichete pentru noua dvs. componentă:

   <aplicație-despre-pagină></app-about-page>

4. Deschide despre-pagină.component.ts fişier. Dacă nu aveți mult cod HTML, puteți utiliza atributul șablon pentru a-l scrie direct în fișierul TypeScript. Înlocuiți decoratorul @Component cu următoarele:

   @Component({
    selector: 'aplicație-despre-pagină',
    șablon: '<h2>Despre Pagina</h2><br><p>Aceasta este redarea HTML din fișierul TypeScript!</p>'
   })
   

5. Dacă doriți să includeți un șablon cu mai multe rânduri, puteți utiliza în schimb ghilimele de bifare înapoi:

   @Component({
    selector: 'aplicație-despre-pagină',
    șablon: `<h2>Despre Pagina</h2>
   <br>
   <p>Aceasta este redarea HTML din fișierul TypeScript!</p>`
   })

6. În terminal, tastați ng servi pentru a compila codul și a-l rula într-un browser web. Deschideți aplicația la http://localhost: 4200/. Codul dvs. HTML din fișierul TypeScript va fi redat pe pagină.
7. În despre-pagină.component.ts, înlocuiți „șablon” cu „templateUrl”. Includeți linkul către fișierul HTML extern al componentei. Puteți folosi „templateUrl” dacă aveți un cod HTML mai complex care necesită propriul fișier.

   @Component({
    selector: 'aplicație-despre-pagină',
    templateUrl: './about-page.component.html'
   })

8. Adăugați niște cod HTML la about-page.component.html fişier:

   <h2>Despre Pagina</h2>
   <p>Aceasta este redarea HTML din fișierul HTML!</p>

9. Reveniți la browser sau rulați din nou ng servi pentru a vă recompila codul. Deschideți aplicația la http://localhost: 4200/. Browserul redă acum HTML-ul din about-page.component.html fişier.

Ce sunt stilurile și styleUrls în Angular?

În mod similar cu HTML, puteți utiliza fie „stil”, fie „styleUrls”, în funcție de locul în care alegeți să stocați CSS.

Puteți include CSS în codul TypeScript dacă aveți declarații CSS foarte simple. În caz contrar, puteți folosi „styleUrls” pentru a lega fișierul TypeScript la un CSS extern care conține mai multe stiluri.

1. În aplicația dvs. Angular creată anterior, deschideți despre-pagină.component.ts fişier. Adăugați un atribut „stiluri” la componentă. În „stiluri”, adăugați stilul dvs. CSS pentru pagină:

   @Component({
    selector: 'aplicație-despre-pagină',
    templateUrl: './about-page.component.html',
    stiluri: ['h2 {culoare: roșu}','p {culoare: verde}']
   })

2. În terminal, tastați ng servi pentru a compila codul și a-l rula într-un browser web. Deschideți aplicația la http://localhost: 4200/ pentru a vizualiza stilul specificat în fișierul TypeScript.
3. Dacă aveți o mulțime de CSS, utilizați „styleUrls” în loc de „styles”, pentru a lega fișierul TypeScript la un fișier CSS extern. În despre-pagină.component.ts, înlocuiți decoratorul @Component cu următoarele:

   @Component({
    selector: 'aplicație-despre-pagină',
    templateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Adăugați ceva stil CSS la about-page.component.css:

   h2 {
    Culoarea albastra
   }
   p {
    culoare: portocaliu închis
   }

5. Reveniți la browser sau rulați din nou ng servi pentru a vă recompila codul. Deschideți aplicația la http://localhost: 4200/ pentru a vizualiza stilurile utilizate din fișierul CSS extern.

Redarea HTML-ului unei componente în Angular

Acum știți diferitele moduri în care vă puteți reda conținutul HTML și CSS într-o aplicație Angular. Puteți determina ce abordare doriți să utilizați în funcție de complexitatea HTML și CSS.

Dacă sunteți interesat, puteți explora cum să treceți date între fișierele HTML și TypeScript ale unei componente Angular.