Как вставлять Angular 2 компонента в разные узлы DOM на простой странице JavaScript?

Пример использования: Клиент хочет создать библиотеку, состоящую из Angular 2 компонентов, но предоставляющую абстрагированный, технологично-агностический интерфейс для конечного пользователя (разработчика) этой библиотеки, так что эти пользователи могут использовать простой JavaScript и не знать о внутренних компонентах библиотеки.

Трудность возникает из следующего:

  • Существует страница, в которой используется обычный JavaScript. Эта страница разработана сторонними организациями.
  • Третья сторона должна иметь возможность вставить данный компонент Angular 2 в определенные места (узлы DOM) на странице.
  • Скажем, что компонент <mg-input>, и он должен отображаться в заголовке простой страницы JavaScript, но не только там - также в форме вниз по странице. Два разных места, два разных узла DOM, которые имеют между собой простой html.

Вопрос: как мы загружаем компонент в определенный DOM node и как мы передаем конфигурацию (а не примитивы, но сложный объект) для этих компонентов?

В мире React это выполняется просто запустив ReactDom.render(domEl, <CustomInput nonPrimitiveConfig={config}/>) и в зависимости от того, что domEl и config, компонент будет отображаться в разных местах с различной конфигурацией.

Как это сделать в Angular 2?

Ответы

Ответ 1

Может быть, спросите, почему они хотят специально Angular 2 компонента?

Мы закодировали автономный "виджет", состоящий из javascript API, пользовательского интерфейса и стиля. Разработчик приложения вызывает функцию javascript для его запуска.

Все, что требуется разработчику, упаковано с нулевыми библиотечными зависимостями.

Ваша альтернатива заключается в том, чтобы скорее разработать компоненты за вычетом пользовательского интерфейса (например, закрытия /SEF ). Затем клиентское приложение может использовать любые технологии, которые они хотят для пользовательского интерфейса.

Ответ 2

Это невозможно с Angular до тех пор, пока не будет добавлено Пользовательские элементы (было объявлено Q4 2017, но github repo был заархивирован по какой-то причине, поэтому я не уверен, будет ли CE продолжен развиваться).

Что бы вы могли сделать, это использовать Stencil для сборки ваших компонентов. Они очень похожи (используйте typescript) на то, как вы создаете компоненты в Angular - такие компоненты затем могут быть загружены самим Angular (с некоторыми базовыми конфигурациями) или любой другой каркас или даже в простой ванильный HTML/JS.

Например, здесь является основным компонентом Stencil.

Основное отличие от Angular заключается в том, что нет отдельного HTML файла шаблона, но вместо этого он использует JSX для визуализации шаблона.

Третья сторона сможет вставить эти компоненты в определенное место.

Ваши разработчики могут добавить компоненты в проект Angular для любой цели, в которой вы нуждаетесь, чтобы они находились в Angular.

Ответ 3

Вы должны быть в состоянии использовать angular элементы для достижения этой цели. Angular Elements позволяет создавать класс, который можно зарегистрировать в большинстве популярных браузеров как пользовательский элемент. Затем пользовательский элемент можно использовать точно так же, как любой другой элемент DOM, и он включает угловое связывание и обнаружение изменений. Проверьте это для более подробной информации: https://angular.io/guide/elements

Редактировать: Эта функциональность существует только для Angular 6+. Если вам необходимо использовать Angular 2, это не вариант.