Mitä ovat templateUrl- ja styleUrl-osoitteet Angularissa?

Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.

Angularilla voit erottaa sovelluksesi sivut, valintaikkunat tai muut osat osiin. Angular-sovelluksen komponentit koostuvat pääasiassa HTML-, CSS- ja TypeScript-tiedostoista.

TypeScript-tiedostoon voit lisätä mitä tahansa logiikkaa, joka tarvitaan käyttöliittymän toimimiseen, kuten tietojen hakemiseen palvelimelta.

Voit myös renderöidä komponentin HTML- ja CSS-koodit TypeScriptillä määrittämällä sen malli- ja tyyliattribuutit. Voit käyttää templateUrl- tai styleUrl-tiedostoja linkittääksesi ulkoisiin HTML- tai CSS-tiedostoihin.

Mikä on malli ja templateUrl Angularissa?

Kun sinä Luo oma komponentti Angularissa, voit hahmontaa sen HTML-koodin mallin avulla. Voit kirjoittaa HTML-mallin kahdella tavalla:

• Voit kirjoittaa HTML-koodisi mallin sisään itse TypeScript-tiedostossa.
instagram viewer
• Voit kirjoittaa HTML-koodisi ulkoiseen tiedostoon ja linkittää TypeScript-tiedoston tähän HTML-tiedostoon.

Uudessa komponentissa voit asettaa joko "template"- tai "templateUrl"-attribuutit sen mukaan, mihin kirjoitat HTML-koodisi.

1. Luo uusi Angular-sovellus.
2. Suorita sovelluksesi terminaalissa ng tuottaa komponenttia komento luodaksesi uuden komponentin. Kutsu uusi komponentti "about-sivuksi".

   ng luo komponenttitietosivua

3. Sisään app.component.html, korvaa nykyinen koodi uuden komponentin tunnisteilla:

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

4. Avaa about-page.component.ts tiedosto. Jos sinulla ei ole paljon HTML-koodia, voit kirjoittaa sen suoraan TypeScript-tiedoston sisään käyttämällä template-attribuuttia. Korvaa @Component-decorator seuraavalla:

   @Komponentti({
    valitsin: 'app-about-sivu',
    sapluuna: '<h2>Tietoja sivusta</h2><br><s>Tämä renderöi HTML-koodin TypeScript-tiedostosta!</s>'
   })
   

5. Jos haluat sisällyttää monirivisen mallin, voit käyttää sen sijaan takaisin rastitettuja lainausmerkkejä:

   @Komponentti({
    valitsin: 'app-about-sivu',
    malli: `<h2>Tietoja sivusta</h2>
   <br>
   <s>Tämä renderöi HTML-koodin TypeScript-tiedostosta!</s>`
   })

6. Kirjoita terminaaliin palvella kääntääksesi koodisi ja suorittaaksesi sen verkkoselaimessa. Avaa sovelluksesi osoitteessa http://localhost: 4200/. TypeScript-tiedoston HTML-koodisi hahmonnetaan sivulla.
7. Sisään about-page.component.ts, korvaa "template" sanalla "templateUrl". Liitä mukaan linkki komponentin ulkoiseen HTML-tiedostoon. Voit käyttää "templateUrl"-osoitetta, jos sinulla on monimutkaisempi HTML-koodi, joka vaatii oman tiedoston.

   @Komponentti({
    valitsin: 'app-about-sivu',
    templateUrl: './about-page.component.html'
   })

8. Lisää HTML-koodia about-page.component.html tiedosto:

   <h2>Tietoja sivusta</h2>
   <s>Tämä on HTML-koodin hahmontamista HTML-tiedostosta!</s>

9. Palaa selaimeesi tai suorita uudelleen palvella kääntääksesi koodisi uudelleen. Avaa sovelluksesi osoitteessa http://localhost: 4200/. Selain hahmontaa nyt HTML-koodin about-page.component.html tiedosto.

Mitä ovat tyylit ja styleUrl-osoitteet Angularissa?

HTML: n tapaan voit käyttää joko "tyyliä" tai "styleUrl-osoitetta" riippuen siitä, mihin CSS: si tallennetaan.

Voit sisällyttää CSS: n TypeScript-koodiin, jos sinulla on hyvin yksinkertaisia ​​CSS-määrityksiä. Muussa tapauksessa voit linkittää TypeScript-tiedoston ulkoiseen CSS: ään, joka sisältää enemmän tyylejä, käyttämällä "styleUrls"-komentoa.

1. Avaa aiemmin luomassasi Angular-sovelluksessa about-page.component.ts tiedosto. Lisää komponenttiin "tyylit"-attribuutti. Lisää "tyylit" -kohtaan sivun CSS-tyyli:

   @Komponentti({
    valitsin: 'app-about-sivu',
    templateUrl: './about-page.component.html',
    tyylit: ['h2 {väri: punainen}','p {väri: vihreä}']
   })

2. Kirjoita terminaaliin palvella kääntääksesi koodisi ja suorittaaksesi sen verkkoselaimessa. Avaa sovelluksesi osoitteessa http://localhost: 4200/ tarkastellaksesi TypeScript-tiedostossa määritettyä tyyliä.
3. Jos sinulla on paljon CSS: ää, linkitä TypeScript-tiedosto ulkoiseen CSS-tiedostoon käyttämällä "styleUrls"-osoitetta "styles" sijaan. Sisään about-page.component.ts, korvaa @Component decorator seuraavalla:

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

4. Lisää CSS-tyyliä about-page.component.css:

   h2 {
    väri: sininen
   }
   p {
    väri: tumma oranssi
   }

5. Palaa selaimeesi tai suorita uudelleen palvella kääntääksesi koodisi uudelleen. Avaa sovelluksesi osoitteessa http://localhost: 4200/ tarkastellaksesi ulkoisesta CSS-tiedostosta käytettyjä tyylejä.

Komponentin HTML-koodin renderöiminen kulmamuodossa

Nyt tiedät eri tavat, joilla voit hahmontaa HTML- ja CSS-sisältösi Angular-sovelluksessa. Voit määrittää, mitä lähestymistapaa haluat käyttää HTML- ja CSS-koodisi monimutkaisuuden perusteella.

Jos olet kiinnostunut, voit tutkia, kuinka tietoja siirretään Angular-komponentin HTML- ja TypeScript-tiedostojen välillä.