Mik azok az önálló komponensek?

Question

Accepted Answer

**Az önálló komponensek** (Angular 14+, alapértelmezett az újabb verziókban) lehetővé teszik egy komponensnek, hogy **közvetlenül deklarálja a saját függőségeit**, anélkül, hogy egy `NgModule`-hoz kellene tartoznia. Drasztikusan csökkentik a sablonkódot, és most az Angular alkalmazások építésének ajánlott módja. ## Egy önálló komponens ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` A komponens pontosan azt importálja, amit a sablona használ (`CommonModule` a `*ngFor` számára, `RouterLink` a linkek számára) — a függőségei kifejezettek és közös helyen vannak, ahelyett hogy egy külön NgModule-ben deklarálnák őket. ## A kontrasztáció a NgModule-okkal ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Egy önálló alkalmazás indítása (nincs AppModule) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` Az önálló alkalmazások a gyökérszintű `AppModule`-t a `bootstrapApplication` és a **`provideX`** funkciókkal helyettesítik — tisztább, függvényadasított konfiguráció. ## Előnyök ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## Miért fontos ez Az önálló komponensek az Angular **modern iránya** — a keretrendszer mostantól alapértelmezésként önálló komponenseket hozhat létre, és `provideX` funkciókat biztosít a funkciók modulok nélküli konfigurálásához. Eltávolítják a régóta fennálló NgModule-terhet, a függőségeket kifejezettségét és lokalitást biztosítják, valamint leegyszerűsítik a lustas betöltést és az általános mentális modellt. Az önálló komponensek (és a `bootstrapApplication`/`provideRouter`/`provideHttpClient` beállítás) megértése elengedhetetlen a jelenlegi Angular-ral való munkához, míg az NgModule-ismeretek továbbra is szükségesek az örökölt kódhoz.

Egy önálló komponens

A kontrasztáció a NgModule-okkal

Egy önálló alkalmazás indítása (nincs AppModule)

Előnyök

Miért fontos ez

question.related