splincodewd
@splincodewd
Developer

Как создать динамические компоненты на Angular 2+?

Может я что-то не понимаю, но я ребята в ступоре. Сейчас от заказчика пришла задача. Якобы интерфейс пользователя должен легко настраиваться, то есть от сервера приходит структура:

1-ый вариант
{
            "rows": [
                {"l12" : "slider-component"},
                {"l6" : "process-component"},
                {"l6" : "order-component"},
                {"l12": "footer-component"}
            ]
};


аналитик может ее изменить и получиться:
{
            "rows": [
                {"l12" : "slider-component"},
                {"l6" : "search-component"},
                {"l12": "footer-component"}
            ]
};


То есть в любом момент времени от сервера приходит информация о названии компонента, который должен отображаться в UI. А Angular уже сам должен разруливать. Но я не могу понять, в текущей версии фреймворка есть куча возможностей создавать компоненты налету, но везде мы должны в AppModule декларировать все компоненты, которые будут компилироваться.

Но это же тупо! У меня например, 300 компонентов написано, аналитик в базе указал компоненты, которые должны выводиться в UI, например 5, а мне что, импортировать все 300 компонетов?

Я думал, что все на самом деле все просто с JS, типо сервер прислал нам структура, а Angular уже из структуры видит названия компонентов и асинхронно загружает нужный *-component.js файл с его реализацией, темплейтом и тд. Или я что-то не понимаю, причем не могу понять, откуда возьмется этот *-component.js, если его заранее нужно будет собрать через webpack (транслируя из typescript в javascript).

Помогите пожалуйста, как мне реализовать поставленную мне задачу!?
  • Вопрос задан
  • 1540 просмотров
Пригласить эксперта
Ответы на вопрос 2
astec
@astec
Разработчик https://debtstracker.io/
Конкретно не отвечу, но то что вам нужно точно реализовано в Ionic Framework (c 3.2.0) в lazy loading.

Страницы лениво грузятся по строковому названию класса. Для каждой страницы делается свой модуль. Можете посмотреть исходники.

Думаю что-то похожее должно быть в стандартном роутере.

У меня так https://DebtsTracker.io работает.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы