Kaj so templateUrls in styleUrls v Angular?

Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.

Z uporabo Angularja lahko ločite strani, pogovorna okna ali druge razdelke vaše aplikacije na komponente. Komponente v aplikaciji Angular so v glavnem sestavljene iz datotek HTML, CSS in TypeScript.

V datoteko TypeScript lahko dodate katero koli logiko, ki je potrebna za delovanje uporabniškega vmesnika, na primer pridobivanje podatkov s strežnika.

HTML in CSS komponente lahko upodabljate tudi z uporabo TypeScripta, tako da podate atribute predloge in sloga. Za povezavo do zunanjih datotek HTML ali CSS lahko uporabite templateUrl ali styleUrls.

Kaj sta predloga in templateUrl v Angular?

Ko ti ustvarite lastno komponento v Angularju, lahko HTML zanj upodabljate s predlogo. Predlogo HTML lahko napišete na dva načina:

• Kodo HTML lahko napišete znotraj predloge v sami datoteki TypeScript.
instagram viewer
• Svojo kodo HTML lahko napišete v zunanjo datoteko in povežete datoteko TypeScript s to datoteko HTML.

V novi komponenti lahko nastavite atribute "template" ali "templateUrl", odvisno od tega, kje pišete svoj HTML.

1. Ustvariti nova aplikacija Angular.
2. V terminalu vaše aplikacije zaženite ng ustvari komponento ukaz za ustvarjanje nove komponente. Pokličite novo komponento "about-page".

   ng ustvari komponento o strani

3. notri app.component.html, zamenjajte trenutno kodo z oznakami za vašo novo komponento:

   <stran o aplikaciji></app-about-page>

4. Odprite about-page.component.ts mapa. Če nimate veliko kode HTML, lahko uporabite atribut predloge, da jo zapišete neposredno v datoteko TypeScript. Zamenjajte dekorater @Component z naslednjim:

   @Komponenta({
    selektor: 'stran o aplikaciji',
    predloga: '<h2>O strani</h2><št><str>To upodablja HTML iz datoteke TypeScript!</str>'
   })
   

5. Če želite vključiti večvrstično predlogo, lahko namesto tega uporabite povratne narekovaje:

   @Komponenta({
    selektor: 'stran o aplikaciji',
    predloga: `<h2>O strani</h2>
   <št>
   <str>To upodablja HTML iz datoteke TypeScript!</str>`
   })

6. V terminal vnesite ng služijo da prevedete kodo in jo zaženete v spletnem brskalniku. Odprite svojo aplikacijo na http://localhost: 4200/. Vaša koda HTML iz datoteke TypeScript bo upodobljena na strani.
7. notri about-page.component.ts, zamenjajte "template" s "templateUrl". Vključite povezavo do zunanje datoteke HTML komponente. Uporabite lahko »templateUrl«, če imate bolj zapleteno kodo HTML, ki zahteva lastno datoteko.

   @Komponenta({
    selektor: 'stran o aplikaciji',
    templateUrl: './about-page.component.html'
   })

8. Dodajte nekaj kode HTML v about-page.component.html mapa:

   <h2>O strani</h2>
   <str>To je upodabljanje HTML iz datoteke HTML!</str>

9. Vrnite se v brskalnik ali znova zaženite ng služijo za ponovno prevajanje kode. Odprite svojo aplikacijo na http://localhost: 4200/. Brskalnik zdaj upodobi HTML iz about-page.component.html mapa.

Kaj so slogi in styleUrls v Angular?

Podobno kot HTML lahko uporabite "style" ali "styleUrls", odvisno od tega, kje želite shraniti svoj CSS.

CSS lahko vključite v kodo TypeScript, če imate zelo preproste deklaracije CSS. V nasprotnem primeru lahko uporabite »styleUrls« za povezavo datoteke TypeScript z zunanjim CSS, ki vsebuje več slogov.

1. V vaši predhodno ustvarjeni aplikaciji Angular odprite about-page.component.ts mapa. Komponenti dodajte atribut "styles". Znotraj »slogov« dodajte svoj slog CSS za stran:

   @Komponenta({
    selektor: 'stran o aplikaciji',
    templateUrl: './about-page.component.html',
    slogi: ['h2 {barva: rdeča}','p {barva: zelena}']
   })

2. V terminal vnesite ng služijo da prevedete kodo in jo zaženete v spletnem brskalniku. Odprite svojo aplikacijo na http://localhost: 4200/ za ogled stila, določenega v datoteki TypeScript.
3. Če imate veliko CSS, uporabite "styleUrls" namesto "styles", da povežete datoteko TypeScript z zunanjo datoteko CSS. notri about-page.component.ts, zamenjajte dekorater @Component z naslednjim:

   @Komponenta({
    selektor: 'stran o aplikaciji',
    templateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Dodajte nekaj sloga CSS about-page.component.css:

   h2 {
    barva: modra
   }
   p {
    barva: temno oranžna
   }

5. Vrnite se v brskalnik ali znova zaženite ng služijo za ponovno prevajanje kode. Odprite svojo aplikacijo na http://localhost: 4200/ za ogled uporabljenih slogov iz zunanje datoteke CSS.

Upodabljanje HTML-ja komponente v Angularju

Zdaj poznate različne načine, kako lahko upodobite svojo vsebino HTML in CSS v aplikaciji Angular. Na podlagi kompleksnosti HTML in CSS lahko določite, kateri pristop želite uporabiti.

Če vas zanima, lahko raziščete, kako posredovati podatke med datotekama HTML in TypeScript komponente Angular.