Wat zijn templateUrls en styleUrls in Angular?

Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.

Met Angular kunt u pagina's, dialoogvensters of andere delen van uw app opsplitsen in componenten. Componenten in een Angular-applicatie bestaan ​​voornamelijk uit HTML-, CSS- en TypeScript-bestanden.

In het TypeScript-bestand kunt u alle logica toevoegen die nodig is om de gebruikersinterface te laten werken, zoals het ophalen van gegevens van een server.

U kunt de HTML en CSS van de component ook weergeven met behulp van TypeScript, door de sjabloon- en stijlkenmerken op te geven. U kunt templateUrl of styleUrls gebruiken om te linken naar externe HTML- of CSS-bestanden.

Wat is de sjabloon en templateUrl in Angular?

Wanneer je maak je eigen component in Angular, kunt u de HTML ervoor weergeven met behulp van een sjabloon. Er zijn twee manieren waarop u uw HTML-sjabloon kunt schrijven:

• U kunt uw HTML-code in een sjabloon schrijven in het TypeScript-bestand zelf.
• U kunt uw HTML-code in een extern bestand schrijven en het TypeScript-bestand aan dit HTML-bestand koppelen.

In een nieuwe component kunt u de attributen "template" of "templateUrl" instellen, afhankelijk van waar u uw HTML schrijft.

1. Maak een nieuwe Angular-app.
2. Voer in de terminal van uw toepassing het ng component genereren opdracht om een ​​nieuw onderdeel te maken. Noem de nieuwe component "about-page".

   ng component over-pagina genereren

3. In app.component.html, vervang de huidige code door tags voor uw nieuwe component:

   <app-over-pagina></app-about-page>

4. Open de over-pagina.component.ts bestand. Als u niet veel HTML-code heeft, kunt u het sjabloonkenmerk gebruiken om het rechtstreeks in het TypeScript-bestand te schrijven. Vervang de @Component-decorateur door het volgende:

   @Onderdeel({
    kiezer: 'app-over-pagina',
    sjabloon: '<h2>Over pagina</h2><br><P>Dit is de weergave van de HTML uit het TypeScript-bestand!</P>'
   })
   

5. Als u een sjabloon met meerdere regels wilt opnemen, kunt u in plaats daarvan aanhalingstekens gebruiken:

   @Onderdeel({
    kiezer: 'app-over-pagina',
    sjabloon: `<h2>Over pagina</h2>
   <br>
   <P>Dit is de weergave van de HTML uit het TypeScript-bestand!</P>`
   })

6. Typ in de terminal serveren om uw code te compileren en deze in een webbrowser uit te voeren. Open je app op http://localhost: 4200/. Uw HTML-code van het TypeScript-bestand wordt weergegeven op de pagina.
7. In over-pagina.component.ts, vervang in plaats daarvan "template" door "templateUrl". Voeg de link naar het externe HTML-bestand van de component toe. U kunt "templateUrl" gebruiken als u meer complexe HTML-code heeft waarvoor een eigen bestand nodig is.

   @Onderdeel({
    kiezer: 'app-over-pagina',
    sjabloonUrl: './about-page.component.html'
   })

8. Voeg wat HTML-code toe aan het over-pagina.component.html bestand:

   <h2>Over pagina</h2>
   <P>Dit is de weergave van de HTML uit het HTML-bestand!</P>

9. Ga terug naar uw browser of voer het opnieuw uit serveren om uw code opnieuw te compileren. Open je app op http://localhost: 4200/. De browser geeft nu de HTML weer van het over-pagina.component.html bestand.

Wat zijn stijlen en styleUrls in Angular?

Net als bij HTML kunt u "style" of "styleUrls" gebruiken, afhankelijk van waar u uw CSS wilt opslaan.

U kunt CSS in de TypeScript-code opnemen als u zeer eenvoudige CSS-declaraties heeft. Anders kunt u "styleUrls" gebruiken om het TypeScript-bestand te koppelen aan een externe CSS die meer stijlen bevat.

1. Open in uw eerder gemaakte Angular-toepassing het over-pagina.component.ts bestand. Voeg een "styles" attribuut toe aan de component. Voeg binnen "stijlen" uw CSS-stijl voor de pagina toe:

   @Onderdeel({
    kiezer: 'app-over-pagina',
    sjabloonUrl: './about-page.component.html',
    stijlen: ['h2 {kleur: rood}','p {kleur: groen}']
   })

2. Typ in de terminal serveren om uw code te compileren en deze in een webbrowser uit te voeren. Open je app op http://localhost: 4200/ om de stijl te bekijken die is opgegeven in het TypeScript-bestand.
3. Als je veel CSS hebt, gebruik dan "styleUrls" in plaats van "styles", om het TypeScript-bestand te koppelen aan een extern CSS-bestand. In over-pagina.component.ts, vervang de @Component-decorateur door het volgende:

   @Onderdeel({
    kiezer: 'app-over-pagina',
    sjabloonUrl: './about-page.component.html',
    stijlUrls: ['./about-page.component.css']
   })

4. Voeg wat CSS-styling toe aan over-pagina.component.css:

   h2 {
    kleur blauw
   }
   P {
    kleur: donkeroranje
   }

5. Ga terug naar uw browser of voer het opnieuw uit serveren om uw code opnieuw te compileren. Open je app op http://localhost: 4200/ om de gebruikte stijlen uit het externe CSS-bestand te bekijken.

De HTML van een component weergeven in Angular

U kent nu de verschillende manieren waarop u uw HTML- en CSS-inhoud kunt weergeven in een Angular-toepassing. Aan de hand van de complexiteit van uw HTML en CSS kunt u bepalen welke aanpak u wilt gebruiken.

Als u geïnteresseerd bent, kunt u onderzoeken hoe u gegevens kunt doorgeven tussen de HTML- en TypeScript-bestanden van een Angular-component.