შექმნა და გამოყენება

კომპონენტების (ისევე, როგორც დირექტივებისა და ფაიფების) შექმნა შეიძლება მათი შემქმნელი დეკორატორის კონფიგურაციის ობიექტში standalone თვისებისtrue-ზე დაყენებით:

@Component({
  standalone: true,
  selector: "image-grid",
  imports: [ImageGridComponent],
  templateUrl: "./image-grid.component.ts",
})
export class ImageGridComponent {
  // component logic
}

თუ ამ კომპონენტის სადმე გამოყენება დაგვჭირდება, მას არ ვარეგისტრირებთ NgModule-ში, არამედ პირდაპირ ვაიმპორტებთ იმ დამოუკიდებელ კომპონენტში, რომელშიც ის დაგვჭირდება:

@Component({
  standalone: true,
  selector: "photo-gallery",
  imports: [ImageGridComponent],
  template: ` ... <image-grid [images]="imageList"></image-grid> `,
})
export class PhotoGalleryComponent {
  // component logic
}

imports ველში ასევე შეიძლება დამოუკიდებელი ფაიფებისა და დირექტივების შემოტანაც.

NgModule-ების შემოტანა დამოუკიდებელ კომპონენტებში

თუ ჩვენ აპლიკაციაში გვჭირდება ფუნქციონალი, რომლებიც არ არიან standalone და მოდულებში არიან შეკრული, მაშინ შეგვიძლია ამ მოდულების კომპონენტში პირდაპირ შემოტანა imports მასივში:

@Component({
  standalone: true,
  selector: "photo-gallery",
  // an existing module is imported directly into a standalone component
  imports: [MatButtonModule],
  template: `
    ...
    <button mat-button>Next Page</button>
  `,
})
export class PhotoGalleryComponent {
  // logic
}

ასე MatButtonModule-ში არსებული ყველა დაექსპორტებული კომპონენტი, ფაიფი თუ დირექტივი ხელმისაწვდომია PhotoGalleryComponent-ში.

დამოუკიდებელი კომპონენტის შეტანა NgModule-ში

ანალოგიურად, შესაძლებელია დამოუკიდებელი კომპონენტების შეტანა NgModule-ზე დაფუძნებულ კონტექსტშიც. ეს უზრუნველყოფს შესაძლებლობას, რომ ძველი აპლიკაციები ეტაპობრივად და მარტივად გადავიყვანოთ NgModule სისტემიდან standalone სისტემაზე.

@NgModule({
  declarations: [AlbumComponent],
  exports: [AlbumComponent],
  imports: [PhotoGalleryComponent],
})
export class AlbumModule {}

თუმცა PhotoGalleryComponent არის standalone, მისი დაიმპორტება ძველებური მეთოდითაც შეიძლება.

ასერომ, დამოუკიდებელი კომპონენტები არ მოდიან კონფლიქტში ანგულარის წინა ვერსიის მოდულებთან. რაღაც თვალსაზრისით, ახლა თითოეული კომპონენტი არის თვითკმარი მოდული.

Bootstrapping

ასეთი სისტემით main.ts-ში bootstrap განსხვავებულად ხდება. იმის მაგივრად, რომ ეს მოხდეს მთლიან მოდულზე, გამოიყენება ფუნქცია bootstrapApplication რომელიც აპლიკაციის მთავარ დამოუკიდებელ კომპონენტს იღებს:

import { bootstrapApplication } from "@angular/platform-browser";
import { PhotoAppComponent } from "./app/photo.app.component";

bootstrapApplication(PhotoAppComponent);

მეორე არგუმენტად ობიექტში, providers მასივში შესაძლებელია ისეთი მოდულების შემოტანა რომლებიც (ძველი მიდგომით) forRoot ფუნქციაზე დაძახებას საჭიროებენ:

import { LibraryModule } from "ngmodule-based-library";

bootstrapApplication(PhotoAppComponent, {
  providers: [importProvidersFrom(LibraryModule.forRoot())],
});

აქვე შეიძლება DI-ს კონფიგურაციაც:

bootstrapApplication(PhotoAppComponent, {
  providers: [
    {
      provide: BACKEND_URL,
      useValue: "https://photoapp.looknongmodules.com/api",
    },
    // ...
  ],
});