Frontender Libs - обзор библиотек JS / CSS

Динамическая загрузка компонентов с использованием возможностей Angular Ivy

Одним из нововведений в Angular с появлением Ivy является возможность динамической загрузки компонентов. Ранее этот процесс требовал использования ComponentFactoryResolver. С Ivy же, динамическая загрузка компонентов стала проще и интуитивно понятнее.

Пример:

Для динамической загрузки компонентов мы можем использовать метод ViewContainerRef.createComponent. Он позволяет загружать компоненты по мере необходимости, не загружая их в основной бандл приложения.

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-loader',
  template: `<ng-template #container></ng-template>`
})
export class DynamicLoaderComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

  constructor() {}

  loadComponent(component: any) {
    this.container.clear();
    this.container.createComponent(component);
  }
}

👉 @sWebDev

👍4👎1

www.tgoop.com/sWebDev/3155

1.4K viewsSep 23, 2024 at 07:43

Динамическая загрузка компонентов с использованием возможностей Angular Ivy

Одним из нововведений в Angular с появлением Ivy является возможность динамической загрузки компонентов. Ранее этот процесс требовал использования ComponentFactoryResolver. С Ivy же, динамическая загрузка компонентов стала проще и интуитивно понятнее.

Пример:

Для динамической загрузки компонентов мы можем использовать метод ViewContainerRef.createComponent. Он позволяет загружать компоненты по мере необходимости, не загружая их в основной бандл приложения.

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-loader',
  template: `<ng-template #container></ng-template>`
})
export class DynamicLoaderComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

  constructor() {}

  loadComponent(component: any) {
    this.container.clear();
    this.container.createComponent(component);
  }
}

BY Frontender Libs - обзор библиотек JS / CSS