Komponenty dynamiczne

W tej lekcji nauczą się Państwo dynamicznie ładować komponenty w Angularze, aby tworzyć elastyczne aplikacje.

Czym są komponenty dynamiczne?

Komponenty dynamiczne są ładowane do widoku w czasie działania, zamiast być bezpośrednio zadeklarowane w szablonie.

Dlaczego warto używać komponentów dynamicznych?

• Elastyczne renderowanie interfejsu użytkownika
• Warunkowe wyświetlanie komponentów
• Tworzenie dynamicznych pulpitów lub okien modalnych

Tworzenie elementu zastępczego

Elementu <ng-container> należy użyć jako miejsca zastępczego do ładowania komponentów dynamicznych:

<ng-container #dynamicContainer></ng-container>

Używanie ViewChild

Do kontenera można uzyskać dostęp za pomocą @ViewChild w klasie komponentu:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

Dynamiczne ładowanie komponentów

Do tworzenia i wstawiania komponentów należy użyć fabryki komponentów:

const componentRef = this.container.createComponent(MyDynamicComponent);

Przekazywanie danych do komponentów dynamicznych

Dane do dynamicznie utworzonego komponentu należy przekazywać za pomocą właściwości wejściowych:

componentRef.instance.data = 'Hello Dynamic';

Usuwanie komponentów dynamicznych

Komponenty dynamiczne można łatwo usuwać z DOM:

this.container.clear();

Podsumowanie

Wiedzą już Państwo, jak dynamicznie tworzyć, zarządzać i usuwać komponenty w Angularze. Świetna praca!