Kas yra savarankiški komponentai?

Question

Accepted Answer

**Savarankiški komponentai** (Angular 14+, numatytieji naujesniuose versijose) leidžia komponentui **tiesioginį savo priklausomybių deklaravimą** be poreikio priklausyti `NgModule`. Jie drastiškai sumažina šabloninius kodą ir dabar yra rekomenduojamas būdas kurti Angular programas. ## Savarankiškas komponentas ```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 = []; } ``` Komponentas importuoja tiksliai tai, ką naudoja jo šablonas (`CommonModule` `*ngFor` ir `RouterLink` nuorodoms) — jo priklausomybės yra aiškios ir vietoje, o ne deklaruojamos atskirame NgModule. ## Kontrasto su NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Savarankiškos programos paleidimas (be 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 ], }); ``` Savarankiškos programos keičia šaknies `AppModule` su `bootstrapApplication` ir **`provideX`** funkcijomis — švaresne, funkcijomis pagrįsta konfiguracija. ## Privalumai ```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 ``` ## Kodėl tai svarbu Savarankiški komponentai yra **šiuolaikinis Angular kryptis** — sistema dabar sukūrimo metu naudoja savarankiškus komponentus ir suteikia `provideX` funkcijas funkcionalumui konfigūruoti be modulių. Jie pašalina ilgalaikę NgModule papildomą sąnaudą, daro priklausomybes aiškias ir lokalias, ir supaprastina slaptą įkėlimą ir bendrą protinį modelį. Savarankiškų komponentų supratimas (ir `bootstrapApplication`/`provideRouter`/`provideHttpClient` nustatymas) yra būtinas darbui su šiuolaikine Angular, tuo tarpu NgModule žinios lieka reikalingos senam kodui.