Angular Academy · leksjon

Komponentspesifikke stiler

Hold stilene lokale for en komponent.

Leksjon 1 av 413 trinn

Komponentspesifikke stiler er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Stiler hører til komponenter

Angular lar hver komponent ha sin egen CSS. Som standard er disse stilene avgrenset, noe som betyr at de bare påvirker komponentens mal og ikke resten av siden.

Innebygd styles-array

De kan definere stiler direkte i @Component-dekoratøren ved hjelp av styles-arrayet.

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

Eksterne styleUrls

Vanligere er det å angi én eller flere eksterne stilark med styleUrls.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

Kortformen styleUrl

For ett enkelt stilark støtter moderne Angular den entallsbaserte egenskapen styleUrl.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

Avgrensning i praksis

En .card-regel i én komponent lekker ikke over i en annen komponent som også bruker klassen card. Hver komponent er isolert.

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

Slik fungerer avgrensning

Angular legger til unike attributter på elementene i en komponent og skriver om CSS-selektorene slik at de samsvarer, slik at stilene bare gjelder inne i den komponenten.

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

Stiler lekker ikke inn

Akkurat som stilene Deres holder seg inne, vil de fleste eksterne stiler heller ikke utilsiktet overstyre komponentreglene. Dette holder komponentene selvstendige.

Globale stiler

For stiler som gjelder hele appen bruker De den globale styles.css-filen som er oppført i angular.json. Disse stilene er ikke avgrenset.

/* src/styles.css - global */
body { font-family: system-ui; }

Flere stilark

En komponent kan laste inn flere stilark ved å føre dem opp i arrayet.

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

Bruke class-bindinger

Avgrensede stiler passer naturlig sammen med class-bindinger for å bruke regler betinget.

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

Hvorfor avgrensning er nyttig

Avgrensede stiler forhindrer navnekollisjoner i store apper, lar team arbeide uavhengig av hverandre og gjør komponenter portable og enklere å forstå.

Kort sjekk

Test forståelsen Deres av komponentavgrensede stiler.

Besvar den i den interaktive leksjonen

Oppsummering

Komponenter bruker CSS via styles, styleUrls eller styleUrl. Som standard er disse reglene avgrenset til komponenten, slik at konflikter unngås. Bruk det globale stilarket for regler som gjelder hele appen.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Komponentspesifikke stiler» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Komponentspesifikke stiler», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Komponentspesifikke stiler»?

Hold stilene lokale for en komponent. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Komponentspesifikke stiler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy