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.

MAKEUSE AV DAGENS VIDEO

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.
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.

Skapa en nya Angular-appen .
I terminalen för din applikation, kör av genereringskomponenten kommando för att skapa en ny komponent. Kalla den nya komponenten 'om-sida'.
```
ng generate component about-page
```
I app.component.html, ersätt den nuvarande koden med taggar för din nya komponent:
```
<app-about-page></app-about-page>
```
Ö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:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

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

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

I terminalen skriver du av tjäna för att kompilera din kod och köra den i en webbläsare. Öppna din app på http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
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.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

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

<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>

Gå tillbaka till din webbläsare eller kör igen av tjäna för att kompilera om din kod. Öppna din app på http://localhost:4200/. The browser now renders the HTML from the 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.

hur får jag reda på vem som ringer mig gratis

Ö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:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
I terminalen skriver du av tjäna för att kompilera din kod och köra den i en webbläsare. Öppna din app på http://localhost:4200/ to view the styling specified in the TypeScript file.
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 , byt ut @Component decorator med följande:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```
Lägg till lite CSS-styling till about-page.component.css :
```
h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}
```
Gå tillbaka till din webbläsare eller kör igen av tjäna för att kompilera om din kod. Öppna din app på http://localhost:4200/ to view the styles used from the external CSS file.

Å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.