Будування низькокодової динамічної системи рендерингу компонентів в Angular

В цьому блозі ми розглянемо, як побудувати платформу з низьким кодом для динамічного рендерингу компонентів Angular, таких як кнопки та мітки. Ми досягнемо цього, визначивши конфігурацію компонентів у форматі JSON і динамічно рендеримо їх у додатку. Цей підхід дозволяє створювати повторно використовувані та налаштовувані компоненти з мінімальними зусиллями.

Огляд

Ідея проста:

1. Визначити UI компоненти (кнопки, мітки тощо) та їх стилі/дії у конфігурації JSON.
2. Динамічно завантажувати та рендерити ці компоненти в додатку Angular.
3. Стилізувати та додавати функціональність до компонентів на основі даних JSON.

Приклад конфігурації JSON

Нижче наведена конфігурація JSON для динамічного рендерингу кнопки та мітки:

{  
 "components": [  
 {  
 "type": "label",  
 "text": "Динамічна мітка",  
 "style": {  
 "color": "blue",  
 "fontSize": "20px",  
 "fontWeight": "bold"  
 }  
 },  
 {  
 "type": "button",  
 "text": "Натисни мене",  
 "style": {  
 "backgroundColor": "green",  
 "color": "white",  
 "padding": "10px 20px",  
 "borderRadius": "5px"  
 },  
 "action": "buttonClicked"  
 }  
 ]  
}

Цей JSON визначає:

• мітку з динамічним текстом та стилями.
• кнопку з кастомними стилями та дією (buttonClicked).

Покрокова реалізація

1. Створіть Angular додаток

Спочатку налаштуйте новий Angular проект:

ng new dynamic-components  
cd dynamic-components

2. Створіть сервіс для завантаження JSON

Створіть сервіс, який надасть конфігурацію JSON:

ng generate service dynamic-loader

У dynamic-loader.service.ts:

import { Injectable } from '@angular/core';  

@Injectable({  
 providedIn: 'root'  
})  
export class DynamicLoaderService {  
 getComponents() {  
 return {  
 "components": [  
 {  
 "type": "label",  
 "text": "Динамічна мітка",  
 "style": {  
 "color": "blue",  
 "fontSize": "20px",  
 "fontWeight": "bold"  
 }  
 },  
 {  
 "type": "button",  
 "text": "Натисни мене",  
 "style": {  
 "backgroundColor": "green",  
 "color": "white",  
 "padding": "10px 20px",  
 "borderRadius": "5px"  
 },  
 "action": "buttonClicked"  
 }  
 ]  
 };  
 }  
}

3. Створіть компонент для динамічного рендерингу UI

Створіть компонент dynamic-renderer:

ng generate component dynamic-renderer

У dynamic-renderer.component.ts:

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

@Component({  
 selector: 'app-dynamic-renderer',  
 template: `  




 {{ component.text }}  




 {{ component.text }}  



 `,  
 styles: []  
})  
export class DynamicRendererComponent {  
 @Input() components: any[] = [];  

 handleAction(action: string) {  
 if (action === 'buttonClicked') {  
 alert('Кнопка натиснута!');  
 }  
 }  
}

4. Завантажте JSON у AppComponent

Оновіть app.component.ts, щоб використати DynamicLoaderService та передати дані в DynamicRendererComponent:

import { Component } from '@angular/core';  
import { DynamicLoaderService } from './dynamic-loader.service';  

@Component({  
 selector: 'app-root',  
 template: ``,  
 styles: []  
})  
export class AppComponent {  
 components: any[] = [];  

 constructor(private dynamicLoader: DynamicLoaderService) {}  

 ngOnInit() {  
 const data = this.dynamicLoader.getComponents();  
 this.components = data.components;  
 }  
}

5.

Оновлення AppModule

Додайте компонент DynamicRendererComponent до масиву declarations у файлі app.module.ts:

import { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent } from './app.component';  
import { DynamicRendererComponent } from './dynamic-renderer/dynamic-renderer.component';  

@NgModule({  
 declarations: [  
 AppComponent,  
 DynamicRendererComponent  
 ],  
 imports: [  
 BrowserModule  
 ],  
 providers: [],  
 bootstrap: [AppComponent]  
})  
export class AppModule {}

6. Запуск додатку

Запустіть додаток:

ng serve

Вивід:

• Мітка з текстом "Dynamic Label", стилізована жирним синім текстом.
• Кнопка з текстом "Click Me", стилізована з зеленим фоном і білим текстом.
• Натискання кнопки викликає сповіщення з текстом "Button clicked!".

Ідеї для налаштування

Ось кілька ідей для розширення цієї функціональності:

1. Додати більше компонентів:

• Розширте JSON для включення нових компонентів, таких як введення, випадаючі списки чи картки.
• Приклад:

{  
 "type": "input",  
 "placeholder": "Enter your name",  
 "style": {  
 "border": "1px solid gray",  
 "padding": "8px",  
 "borderRadius": "4px"  
 }  
}

1. Інтеграція з API:

• Завантажуйте JSON динамічно з REST API або серверної служби.

1. Переносні дії:

• Розширте метод handleAction, щоб він виконував різні події чи виклики API.

1. Функціональність експорту:

• Дозвольте користувачам експортувати відрендерений UI як повторно використовуваний компонент Angular.

Висновок

Ця реалізація демонструє, як можна використовувати можливості Angular для створення платформи з низьким кодом для динамічного рендерингу UI компонентів. Підхід на основі JSON дозволяє легко додавати, змінювати або видаляти компоненти без зміни коду, що забезпечує гнучкість і масштабованість.

З цією основою ви можете створити повноцінну платформу з низьким кодом, що відповідає вимогам вашого додатку.

Перекладено з: Building a Low-Code Dynamic Component Renderer in Angular