Kas yra šablono URL ir stiliaus URL kampe?

Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius.

Naudodami Angular galite atskirti puslapius, dialogo langus ar kitas programos dalis į komponentus. „Angular“ programos komponentai daugiausia sudaryti iš HTML, CSS ir „TypeScript“ failų.

„TypeScript“ faile galite pridėti bet kokią logiką, reikalingą vartotojo sąsajai, pvz., duomenų gavimą iš serverio.

Taip pat galite pateikti komponento HTML ir CSS naudodami TypeScript, nurodydami jo šablono ir stiliaus atributus. Galite naudoti templateUrl arba styleUrls, kad susietumėte su išoriniais HTML arba CSS failais.

Kas yra Angular šablonas ir šablono URL?

Kada tu sukurkite savo komponentą Angular, galite pateikti jo HTML naudodami šabloną. Yra du būdai, kaip galite parašyti HTML šabloną:

• HTML kodą galite įrašyti šablone pačiame TypeScript faile.
• Galite įrašyti HTML kodą išoriniame faile ir susieti TypeScript failą su šiuo HTML failu.

Naujame komponente galite nustatyti atributus „template“ arba „templateUrl“, priklausomai nuo to, kur rašote HTML.

1. Sukurti nauja Angular programa.
2. Programos terminale paleiskite ng generuoti komponentą komanda sukurti naują komponentą. Iškvieskite naują komponentą „apie puslapį“.

   ng generuoti komponentą apie puslapį

3. Į app.component.html, pakeiskite dabartinį kodą naujo komponento žymomis:

   <programa apie puslapį></app-about-page>

4. Atidaryk apie puslapį.component.ts failą. Jei neturite daug HTML kodo, galite naudoti šablono atributą ir įrašyti jį tiesiai į TypeScript failą. Pakeiskite @Component dekoratorių taip:

   @Komponentas({
    parinkiklis: 'programa apie puslapį',
    šablonas: '<h2>Apie puslapį</h2><br><p>Tai HTML atvaizdavimas iš „TypeScript“ failo!</p>'
   })
   

5. Jei norite įtraukti kelių eilučių šabloną, vietoj jo galite naudoti kabutes su varnele:

   @Komponentas({
    parinkiklis: 'programa apie puslapį',
    šablonas: `<h2>Apie puslapį</h2>
   <br>
   <p>Tai HTML atvaizdavimas iš „TypeScript“ failo!</p>`
   })

6. Terminale įveskite ng tarnauti Norėdami surinkti kodą ir paleisti jį žiniatinklio naršyklėje. Atidarykite programą adresu http://localhost: 4200/. Jūsų HTML kodas iš TypeScript failo bus pateiktas puslapyje.
7. Į apie puslapį.component.ts, vietoj to pakeiskite „template“ į „templateUrl“. Įtraukite nuorodą į išorinį komponento HTML failą. Galite naudoti „templateUrl“, jei turite sudėtingesnį HTML kodą, kuriam reikalingas atskiras failas.

   @Komponentas({
    parinkiklis: 'programa apie puslapį',
    šablono URL: './about-page.component.html'
   })

8. Pridėkite šiek tiek HTML kodo prie apie puslapį.component.html failas:

   <h2>Apie puslapį</h2>
   <p>Tai HTML atvaizdavimas iš HTML failo!</p>

9. Grįžkite į naršyklę arba paleiskite iš naujo ng tarnauti norėdami iš naujo sudaryti savo kodą. Atidarykite programą adresu http://localhost: 4200/. Dabar naršyklė pateikia HTML iš apie puslapį.component.html failą.

Kas yra Angular stiliai ir stiliaus URL?

Panašiai kaip HTML, galite naudoti „stilius“ arba „styleUrls“, priklausomai nuo to, kur pasirinksite saugoti CSS.

Į TypeScript kodą galite įtraukti CSS, jei turite labai paprastas CSS deklaracijas. Kitu atveju galite naudoti „styleUrls“, kad susietumėte „TypeScript“ failą su išoriniu CSS, kuriame yra daugiau stilių.

1. Anksčiau sukurtoje Angular programoje atidarykite apie puslapį.component.ts failą. Prie komponento pridėkite atributą „stiliai“. Skiltyje „stiliai“ pridėkite savo puslapio CSS stilių:

   @Komponentas({
    parinkiklis: 'programa apie puslapį',
    šablono URL: './about-page.component.html',
    stiliai: ['h2 {spalva: raudona}','p {spalva: žalia}']
   })

2. Terminale įveskite ng tarnauti Norėdami surinkti kodą ir paleisti jį žiniatinklio naršyklėje. Atidarykite programą adresu http://localhost: 4200/ norėdami peržiūrėti „TypeScript“ faile nurodytą stilių.
3. Jei turite daug CSS, naudokite „styleUrls“, o ne „stilius“, kad susietumėte „TypeScript“ failą su išoriniu CSS failu. Į apie puslapį.component.ts, pakeiskite @Component dekoratorių šiuo:

   @Komponentas({
    parinkiklis: 'programa apie puslapį',
    šablono URL: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Pridėkite šiek tiek CSS stiliaus apie puslapį.component.css:

   h2 {
    spalva: mėlyna
   }
   p {
    spalva: tamsiai oranžinė
   }

5. Grįžkite į naršyklę arba paleiskite iš naujo ng tarnauti norėdami iš naujo sudaryti savo kodą. Atidarykite programą adresu http://localhost: 4200/ norėdami peržiūrėti išorinio CSS failo naudojamus stilius.

Komponento HTML atvaizdavimas kampiniu formatu

Dabar žinote skirtingus būdus, kaip galite pateikti savo HTML ir CSS turinį kampinėje programoje. Galite nustatyti, kurį metodą norite naudoti, atsižvelgdami į savo HTML ir CSS sudėtingumą.

Jei susidomėjote, galite ištirti, kaip perduoti duomenis tarp kampinio komponento HTML ir TypeScript failų.