Vad är templateUrls och styleUrls i Angular?

Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision.

Med Angular kan du dela upp sidor, dialogrutor eller andra delar av din app i komponenter. Komponenter i en Angular-applikation består huvudsakligen av HTML-, CSS- och TypeScript-filer.

I TypeScript-filen kan du lägga till vilken logik som helst som krävs för att användargränssnittet ska fungera, till exempel att hämta data från en server.

Du kan också rendera komponentens HTML och CSS med TypeScript, genom att ange dess mall- och stilattribut. Du kan använda templateUrl eller styleUrls för att länka till externa HTML- eller CSS-filer.

Vad är mallen och templateUrl i Angular?

När du skapa din egen komponent i Angular, kan du återge HTML-koden för den med en mall. Det finns två sätt du kan skriva din HTML-mall på:

• Du kan skriva din HTML-kod i en mall i själva TypeScript-filen.
instagram viewer
• Du kan skriva din HTML-kod i en extern fil och länka TypeScript-filen till denna HTML-fil.

I en ny komponent kan du ställa in antingen "template" eller "templateUrl" attribut beroende på var du skriver din HTML.

1. Skapa en nya Angular-appen.
2. I terminalen för din applikation, kör ng generera komponent kommando för att skapa en ny komponent. Kalla den nya komponenten "om-sida".

   ng generera komponent om-sida

3. I app.component.html, ersätt den nuvarande koden med taggar för din nya komponent:

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

4. Öppna about-page.component.ts fil. Om du inte har mycket HTML-kod kan du använda attributet mall för att skriva det direkt i TypeScript-filen. Byt ut @Component-dekoratorn med följande:

   @Komponent({
    väljare: 'app-om-sida',
    mall: '<h2>Om sidan</h2><br><sid>Detta återger HTML från TypeScript-filen!</s>'
   })
   

5. Om du vill inkludera en mall med flera rader kan du istället använda citattecken med bakåtmarkering:

   @Komponent({
    väljare: 'app-om-sida',
    mall: `<h2>Om sidan</h2>
   <br>
   <sid>Detta återger HTML från TypeScript-filen!</s>`
   })

6. I terminalen skriver du ng tjäna för att kompilera din kod och köra den i en webbläsare. Öppna din app på http://localhost: 4200/. Din HTML-kod från TypeScript-filen återges på sidan.
7. I about-page.component.ts, ersätt "template" med "templateUrl" istället. Inkludera länken till komponentens externa HTML-fil. Du kan använda "templateUrl" om du har mer komplex HTML-kod som kräver en egen fil.

   @Komponent({
    väljare: 'app-om-sida',
    templateUrl: './about-page.component.html'
   })

8. Lägg till lite HTML-kod till about-page.component.html fil:

   <h2>Om sidan</h2>
   <sid>Detta återger HTML från HTML-filen!</s>

9. Gå tillbaka till din webbläsare eller kör igen ng tjäna för att kompilera om din kod. Öppna din app på http://localhost: 4200/. Webbläsaren återger nu HTML från about-page.component.html fil.

Vad är stilar och styleUrls i Angular?

På samma sätt som HTML kan du använda antingen "style" eller "styleUrls" beroende på var du väljer att lagra din CSS.

Du kan inkludera CSS i TypeScript-koden om du har mycket enkla CSS-deklarationer. Annars kan du använda "styleUrls" för att länka TypeScript-filen till en extern CSS som innehåller fler stilar.

1. Öppna din tidigare skapade Angular-applikation about-page.component.ts fil. Lägg till ett "stilar"-attribut till komponenten. Inuti "stilar", lägg till din CSS-stil för sidan:

   @Komponent({
    väljare: 'app-om-sida',
    templateUrl: './about-page.component.html',
    stilar: ['h2 {färg: röd}','p {färg: grön}']
   })

2. I terminalen skriver du ng tjäna för att kompilera din kod och köra den i en webbläsare. Öppna din app på http://localhost: 4200/ för att visa den stil som anges i TypeScript-filen.
3. Om du har mycket CSS, använd "styleUrls" istället för "styles", för att länka TypeScript-filen till en extern CSS-fil. I about-page.component.ts, ersätt @Component-dekoratorn med följande:

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

4. Lägg till lite CSS-styling till about-page.component.css:

   h2 {
    färgen blå
   }
   p {
    färg: mörkorange
   }

5. Gå tillbaka till din webbläsare eller kör igen ng tjäna för att kompilera om din kod. Öppna din app på http://localhost: 4200/ för att se stilarna som används från den externa CSS-filen.

Återge HTML för en komponent i Angular

Nu vet du de olika sätten du kan rendera ditt HTML- och CSS-innehåll i en Angular-applikation. Du kan bestämma vilken metod du vill använda baserat på komplexiteten i din HTML och CSS.

Om du är intresserad kan du utforska hur du skickar data mellan HTML- och TypeScript-filerna för en Angular-komponent.