Mis on malli URL-id ja stiili URL-id nurgas?

Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.

Nurga abil saate oma rakenduse lehti, dialooge või muid jaotisi komponentideks eraldada. Angular-rakenduse komponendid koosnevad peamiselt HTML-, CSS- ja TypeScript-failidest.

TypeScript-faili saate lisada mis tahes kasutajaliidese töötamiseks vajalikku loogikat, näiteks andmete hankimist serverist.

Samuti saate TypeScripti abil renderdada komponendi HTML-i ja CSS-i, määrates selle malli ja stiili atribuudid. Väliste HTML- või CSS-failide linkimiseks saate kasutada templateUrl või styleUrls.

Mis on Angularis mall ja malli URL?

Kui sa looge Angularis oma komponent, saate selle jaoks malli kasutades renderdada HTML-i. HTML-malli saate kirjutada kahel viisil.

• Saate kirjutada oma HTML-koodi TypeScript-faili enda malli sisse.
• Saate kirjutada oma HTML-koodi välisesse faili ja linkida TypeScript-faili selle HTML-failiga.

Uues komponendis saate määrata atribuudid "template" või "templateUrl", olenevalt sellest, kuhu HTML-i kirjutate.

1. Loo uus Angular rakendus.
2. Käivitage oma rakenduse terminalis ng genereerida komponenti käsk uue komponendi loomiseks. Kutsu uus komponent "about-page".

   ng genereerida lehe kohta komponenti

3. sisse app.component.html, asendage praegune kood oma uue komponendi siltidega:

   <app-about-leht></app-about-page>

4. Ava about-page.component.ts faili. Kui teil pole palju HTML-koodi, saate selle kirjutamiseks otse TypeScript-faili kasutada atribuuti malli. Asendage @Component dekoraator järgmisega:

   @Component({
    valija: 'app-about-leht',
    mall: '<h2>Lehe kohta</h2><br><lk>See renderdab TypeScript-failist HTML-i!</lk>'
   })
   

5. Kui soovite kaasata mitmerealise malli, võite selle asemel kasutada linnukesega jutumärke.

   @Component({
    valija: 'app-about-leht',
    mall: `<h2>Lehe kohta</h2>
   <br>
   <lk>See renderdab TypeScript-failist HTML-i!</lk>`
   })

6. Tippige terminali teenida koodi kompileerimiseks ja veebibrauseris käivitamiseks. Avage oma rakendus aadressil http://localhost: 4200/. Teie TypeScript-faili HTML-kood renderdatakse lehel.
7. sisse about-page.component.ts, asendage "mall" asemel "templateUrl". Kaasake link komponendi välisele HTML-failile. Kui teil on keerulisem HTML-kood, mis nõuab oma faili, saate kasutada "templateUrl".

   @Component({
    valija: 'app-about-leht',
    malliUrl: './about-page.component.html'
   })

8. Lisage HTML-koodi about-page.component.html fail:

   <h2>Lehe kohta</h2>
   <lk>See on HTML-i renderdamine HTML-failist!</lk>

9. Minge tagasi oma brauserisse või käivitage uuesti teenida koodi uuesti kompileerimiseks. Avage oma rakendus aadressil http://localhost: 4200/. Brauser renderdab nüüd HTML-i alates about-page.component.html faili.

Mis on stiilid ja stiili URL-id nurgas?

Sarnaselt HTML-ile saate kasutada kas "stiili" või "stiili URL-e", olenevalt sellest, kus valite oma CSS-i salvestada.

Kui teil on väga lihtsad CSS-deklaratsioonid, saate TypeScripti koodi lisada CSS-i. Vastasel juhul saate TypeScript-faili linkimiseks kasutada rohkem stiile sisaldava välise CSS-i linkimiseks atribuudi "styleUrls".

1. Avage varem loodud Angular rakenduses about-page.component.ts faili. Lisage komponendile atribuut "stiilid". Lisage "stiilidesse" oma lehe CSS-stiil:

   @Component({
    valija: 'app-about-leht',
    malliUrl: './about-page.component.html',
    stiilid: ['h2 {värv: punane}','p {värv: roheline}']
   })

2. Tippige terminali teenida koodi kompileerimiseks ja veebibrauseris käivitamiseks. Avage oma rakendus aadressil http://localhost: 4200/, et vaadata TypeScript-failis määratud stiili.
3. Kui teil on palju CSS-i, kasutage TypeScript-faili linkimiseks välise CSS-failiga "style" asemel "styleUrls". sisse about-page.component.ts, asendage @Component dekoraator järgmisega:

   @Component({
    valija: 'app-about-leht',
    malliUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Lisage CSS-i stiil about-page.component.css:

   h2 {
    värvus: sinine
   }
   p {
    värv: tume oranž
   }

5. Minge tagasi oma brauserisse või käivitage uuesti teenida koodi uuesti kompileerimiseks. Avage oma rakendus aadressil http://localhost: 4200/ välisest CSS-failist kasutatud stiilide vaatamiseks.

Komponendi HTML-i renderdamine nurgeliselt

Nüüd teate, kuidas saate Angular-rakenduses HTML- ja CSS-sisu renderdada. Saate oma HTML-i ja CSS-i keerukuse põhjal määrata, millist lähenemisviisi soovite kasutada.

Kui olete huvitatud, võite uurida, kuidas edastada andmeid Angular-komponendi HTML- ja TypeScript-failide vahel.