Hvad er templateUrls og styleUrls i Angular?

Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.

Ved at bruge Angular kan du adskille sider, dialogbokse eller andre sektioner af din app i komponenter. Komponenter i en Angular-applikation består hovedsageligt af HTML-, CSS- og TypeScript-filer.

I TypeScript-filen kan du tilføje enhver logik, der kræves for, at brugergrænsefladen kan fungere, såsom at hente data fra en server.

Du kan også gengive komponentens HTML og CSS ved hjælp af TypeScript ved at angive dens skabelon- og stilattributter. Du kan bruge templateUrl eller styleUrls til at linke til eksterne HTML- eller CSS-filer.

Hvad er skabelonen og templateUrl i Angular?

Når du lav din egen komponent i Angular, kan du gengive HTML'en til det ved hjælp af en skabelon. Der er to måder, du kan skrive din HTML-skabelon på:

• Du kan skrive din HTML-kode inde i en skabelon i selve TypeScript-filen.
• Du kan skrive din HTML-kode i en ekstern fil og linke TypeScript-filen til denne HTML-fil.

I en ny komponent kan du indstille enten "template" eller "templateUrl" attributterne afhængigt af hvor du skriver din HTML.

1. Lave en ny Angular app.
2. I terminalen på din applikation skal du køre ng generere komponent kommando for at oprette en ny komponent. Kald den nye komponent "om-side".

   ng generere komponent om-side

3. I app.component.html, erstatte den nuværende kode med tags for din nye komponent:

   <app-om-side></app-about-page>

4. Åbn om-side.component.ts fil. Hvis du ikke har meget HTML-kode, kan du bruge skabelonattributten til at skrive den direkte inde i TypeScript-filen. Udskift @Component-dekoratoren med følgende:

   @Komponent({
    vælger: 'app-om-side',
    skabelon: '<h2>Om side</h2><br><s>Dette gengiver HTML fra TypeScript-filen!</s>'
   })
   

5. Hvis du vil inkludere en skabelon med flere linjer, kan du bruge tilbagekrydsende anførselstegn i stedet:

   @Komponent({
    vælger: 'app-om-side',
    skabelon: `<h2>Om side</h2>
   <br>
   <s>Dette gengiver HTML fra TypeScript-filen!</s>`
   })

6. Skriv i terminalen ng tjene at kompilere din kode og køre den i en webbrowser. Åbn din app kl http://localhost: 4200/. Din HTML-kode fra TypeScript-filen gengives på siden.
7. I om-side.component.ts, erstat "skabelon" med "skabelonUrl" i stedet for. Inkluder linket til komponentens eksterne HTML-fil. Du kan bruge "templateUrl", hvis du har mere kompleks HTML-kode, der kræver sin egen fil.

   @Komponent({
    vælger: 'app-om-side',
    templateUrl: './about-page.component.html'
   })

8. Tilføj noget HTML-kode til about-page.component.html fil:

   <h2>Om side</h2>
   <s>Dette gengiver HTML fra HTML-filen!</s>

9. Gå tilbage til din browser eller kør igen ng tjene for at genkompilere din kode. Åbn din app kl http://localhost: 4200/. Browseren gengiver nu HTML fra about-page.component.html fil.

Hvad er styles og styleUrls i Angular?

På samme måde som HTML kan du bruge enten "style" eller "styleUrls", afhængigt af hvor du vælger at gemme din CSS.

Du kan inkludere CSS i TypeScript-koden, hvis du har meget simple CSS-deklarationer. Ellers kan du bruge "styleUrls" til at linke TypeScript-filen til en ekstern CSS, der indeholder flere typografier.

1. Åbn din tidligere oprettede Angular-applikation om-side.component.ts fil. Tilføj en "stile"-attribut til komponenten. Tilføj din CSS-styling til siden i "styles":

   @Komponent({
    vælger: 'app-om-side',
    templateUrl: './about-page.component.html',
    stilarter: ['h2 {farve: rød}','p {farve: grøn}']
   })

2. Skriv i terminalen ng tjene at kompilere din kode og køre den i en webbrowser. Åbn din app kl http://localhost: 4200/ for at se den stil, der er angivet i TypeScript-filen.
3. Hvis du har meget CSS, så brug "styleUrls" i stedet for "styles", for at linke TypeScript-filen til en ekstern CSS-fil. I om-side.component.ts, udskift @Component-dekoratoren med følgende:

   @Komponent({
    vælger: 'app-om-side',
    templateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Tilføj noget CSS-styling til om-side.component.css:

   h2 {
    farve: blå
   }
   p {
    farve: mørk orange
   }

5. Gå tilbage til din browser eller kør igen ng tjene for at genkompilere din kode. Åbn din app kl http://localhost: 4200/ for at se de anvendte stilarter fra den eksterne CSS-fil.

Gengivelse af HTML for en komponent i Angular

Nu kender du de forskellige måder, du kan gengive dit HTML- og CSS-indhold i en Angular-applikation. Du kan bestemme, hvilken tilgang du vil bruge baseret på kompleksiteten af ​​din HTML og CSS.

Hvis du er interesseret, kan du undersøge, hvordan du overfører data mellem HTML- og TypeScript-filerne for en Angular-komponent.