Övergång till Fristående Komponenter
I tidigare versioner av Angular var varje komponent tvungen att ingå i en modul. Inte ens den enklaste komponenten kunde existera på egen hand — den var tvungen att deklareras i en NgModule.
Detta var som att behöva ett helt kök bara för att göra en kopp te. Låter omständligt, eller hur?
Därför började Angular-teamet med tiden förenkla strukturen. Detta ledde till införandet av ett nytt tillvägagångssätt — Standalone Components.
Vad är en Standalone Component?
En Standalone Component är en komponent som inte behöver deklareras i en modul (NgModule). Den är självständig, vilket innebär att den innehåller all information om sina beroenden inom sig själv.
För att skapa en sådan lägger du helt enkelt till flaggan standalone: true i @Component-dekorationen och anger eventuella nödvändiga beroenden med hjälp av arrayen imports:
example.ts
Här innebär tillägget av standalone: true ett särskilt alternativ i @Component-dekorationen som informerar Angular om att denna komponent är självständig — den behöver inte deklareras i en NgModule.
Vi anger även en lista över externa beroenden (imports) som komponenten kräver. I det traditionella modulbaserade tillvägagångssättet skickades dessa beroenden till modulens imports. Men när komponenter fungerar utan en modul måste deras beroenden deklareras direkt i komponenten — och Angular agerar då som en intern modul för just den komponenten.
Varför går Angular ifrån NgModules?
NgModules spelade en viktig roll i stora applikationer:
-
De hjälpte till att organisera koden;
-
De gav kontroll över omfånget (synlighet);
-
De var användbara för optimering.
Men med tiden blev det tydligt att många av dessa saker kan hanteras på komponentnivå — enklare och mer intuitivt.
Angular har inte tagit bort moduler — fristående komponenter erbjuder bara ett mer flexibelt alternativ.
Med andra ord är fristående komponenter det moderna sättet att bygga komponenter utan moduler. De förenklar strukturen, gör komponenterna självförsörjande och enklare att använda.
Angular fortsätter att stödja moduler men rekommenderar att använda fristående komponenter för ny kod.
1. Vad gör standalone: true i en komponentdekoratör?
2. Varför behövs egenskapen imports i en fristående komponent?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 3.13Övergång till Fristående Komponenter
Svep för att visa menyn
I tidigare versioner av Angular var varje komponent tvungen att ingå i en modul. Inte ens den enklaste komponenten kunde existera på egen hand — den var tvungen att deklareras i en NgModule.
Detta var som att behöva ett helt kök bara för att göra en kopp te. Låter omständligt, eller hur?
Därför började Angular-teamet med tiden förenkla strukturen. Detta ledde till införandet av ett nytt tillvägagångssätt — Standalone Components.
Vad är en Standalone Component?
En Standalone Component är en komponent som inte behöver deklareras i en modul (NgModule). Den är självständig, vilket innebär att den innehåller all information om sina beroenden inom sig själv.
För att skapa en sådan lägger du helt enkelt till flaggan standalone: true i @Component-dekorationen och anger eventuella nödvändiga beroenden med hjälp av arrayen imports:
example.ts
Här innebär tillägget av standalone: true ett särskilt alternativ i @Component-dekorationen som informerar Angular om att denna komponent är självständig — den behöver inte deklareras i en NgModule.
Vi anger även en lista över externa beroenden (imports) som komponenten kräver. I det traditionella modulbaserade tillvägagångssättet skickades dessa beroenden till modulens imports. Men när komponenter fungerar utan en modul måste deras beroenden deklareras direkt i komponenten — och Angular agerar då som en intern modul för just den komponenten.
Varför går Angular ifrån NgModules?
NgModules spelade en viktig roll i stora applikationer:
-
De hjälpte till att organisera koden;
-
De gav kontroll över omfånget (synlighet);
-
De var användbara för optimering.
Men med tiden blev det tydligt att många av dessa saker kan hanteras på komponentnivå — enklare och mer intuitivt.
Angular har inte tagit bort moduler — fristående komponenter erbjuder bara ett mer flexibelt alternativ.
Med andra ord är fristående komponenter det moderna sättet att bygga komponenter utan moduler. De förenklar strukturen, gör komponenterna självförsörjande och enklare att använda.
Angular fortsätter att stödja moduler men rekommenderar att använda fristående komponenter för ny kod.
1. Vad gör standalone: true i en komponentdekoratör?
2. Varför behövs egenskapen imports i en fristående komponent?
Tack för dina kommentarer!
