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.

durerea este o traducere foarte nedureroasă

REALIZAREA VIDEOCLIPULUI ZILEI

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.

Creeaza o noua aplicație Angular .
În terminalul aplicației dvs., rulați a componentei generate comandă pentru a crea o nouă componentă. Apelați noua componentă „despre-pagina”.
```
ng generate component about-page
```
În app.component.html, înlocuiți codul actual cu etichete pentru noua dvs. componentă:
```
<app-about-page></app-about-page>
```
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ătorul:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

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

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

În terminal, tastați de servire pentru a compila codul și a-l rula într-un browser web. Deschideți aplicația la http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
Î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: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

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

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

Reveniți la browser sau rulați din nou de servire pentru a vă recompila codul. Deschideți aplicația la http://localhost:4200/. The browser now renders the HTML from the 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.

teme Windows 7 pentru Windows 10

Î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 pagina:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
În terminal, tastați de servire pentru a compila codul și a-l rula într-un browser web. Deschideți aplicația la http://localhost:4200/ to view the styling specified in the TypeScript file.
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ătorul:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```

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

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

Reveniți la browser sau rulați din nou de servire pentru a vă recompila codul. Deschideți aplicația la http://localhost:4200/ to view the styles used from the external CSS file.

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.