Авто Биндинг Динамических Компонентов в Angular
Русская версия
Наверняка вы уже пробовали использовать динамические компоненты у себя в проектах, и сталкивались с вопросом о том, как передавать в них данные. Сегодня мы постараемся его решить.
NgSwitch?…
На сайте Angular недавно появилась статья про динамические формы. Посмотрите реализацию и подумайте, какие проблемы вы видите в предложенном варианте?
В принципе, если у вас два-три компонента, и вы точно уверены в том, что они никогда и ни за что не будут изменяться, то эта статья не для вас. Можете спокойно ее закрыть и заварить себе зеленого чая.
Но что делать, если таких компонентов сотня и больше? Как с ними работать и как их поддерживать? Напомню, что это явное нарушение принципов SOLID, ведь при любом изменении придется менять текущую реализацию.
А еще я лис и я не хочу NgSwitch.
Что Angular дает из коробки
ComponentFactoryResolver, который используется для создания всех динамических компонентов, так как именно он нам предоставляет фабрику для создания компонента.
Директива NgComponentOutlet от команды разработчиков Angular, которая сделает всю необходимую работу. Но, к сожалению, при работе с ней вы можете столкнуться с рядом трудностей, о которых поговорим позже.
ComponentFactoryResolver
Взгляните на простой пример как можно создать и отобразить динамический компонент.
У нас есть метод, который получает класс компонента, резолвит фабрику компонента, создает компонент и аттачит его во вью.
Это самый простой способ создания и отображения динамического компонента:
Посмотрите как это может выглядеть в абстрактном примере.
Нам приходится вручную создавать компонент, затем передавать в него данные и в конце не забыть его уничтожить.
Так же, обратите внимание, что у динамического компонента отсутствует хук OnChanges.
NgComponentOutlet
Может быть NgComponentOutlet решит нашу проблему? (спойлер: нет) В его реализации используется точно такой же принцип, который мы описали в методе по созданию динамических компонентов.
Минусы NgComponentOutlet
У вас не будет доступа к компоненту, поэтому не получится им управлять.
Вам не передадут данные в компонент, то есть если нужно что-то в него передать, то как это вообще это сделать? Использовать Injector?
Отсутствует хук OnChanges, а значит компонент получается c неполноценным жизненным циклом.
Ручное управление динамическими компонентами делает код сложным и громоздким, из-за чего его тяжело поддерживать.
Нам это надоело и мы сделали директиву, которая избавляет нас от этой боли и решает перечисленные проблемы.
Встречайте, NgxComponentOutlet!!! 🎉
Автоматический дата биндинг
а значит вам больше не нужно думать о том, как передать данные в динамический компонент. Просто используйте его так же, как и обычный.
Полноценный жизненный цикл
дает возможность использовать уже готовые компоненты, которым он требуется.
Предоставляет доступ ко всему компоненту
для самых отчаянных, которым необходимо все контролировать.
Сравнение
Исходный код на github, демо на stackblitz с героями, таблицей и формой.
Что дальше?
Библиотека постепенно развивается, поэтому в первую очередь следите за изменениями в репозитории.
В следующих статьях поговорим о различных кейсах использования динамических компонентов.
