Опрыскивание Angular 2 компонентов на странице не angular

В настоящее время мы смотрим пути обновления от Angular 1 → Angular 2, и одна из вещей, которые мы сделали с нашей работой Angular 1, - это повторное использование некоторых наших компонентов на страницах, не относящихся к страницам. >

Эти страницы представляют собой статичный HTML (хотя они визуализируются Rails), а затем некоторые компоненты Angular 2 отбрасываются на страницу в местах. Это работало с помощью Angular 1, мы просто загрузили элемент документа с помощью модуля, который предоставил нужные нам директивы и компоненты. Маршрутизация вообще отсутствует.

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

Возможно ли вообще использовать компоненты Angular 2 по мере необходимости в статических HTML-страницах или нам нужно будет перейти к одному дизайну SPA-центра с корневым элементом?

Вкратце, я спрашиваю, может ли быть смешанное статическое содержимое с динамическими компонентами Angular, посыпаемыми внутри, или все компоненты Angular живут в одном корневом элементе на странице?

Ответ 1

Итак, это проще, чем я изначально думал. В Angular 2 документа в нем есть определенная формулировка вокруг загрузки нескольких приложений.

Загрузка нескольких приложений

При работе в окне браузера есть много одноэлементных ресурсы: файлы cookie, название, местоположение и другие. Angular услуги, которые эти ресурсы также должны быть разделены во всех Angularприложения, которые занимают одно и то же окно браузера. По этой причине, Angular создает ровно один глобальный объект платформы, который хранит все общие сервисы, и каждый инжектор приложения Angular имеет платформенный инжектор в качестве родителя.

Каждое приложение имеет свой собственный частный инжектор. Когда есть несколько приложений на странице, Angular обрабатывает каждое приложение услуги инжектора как частные для этого приложения.

Итак, кажется очевидным, что это должно быть возможным и что несколько приложений обмениваются ресурсами службы, на что я надеюсь.

Я провел несколько простых тестов с несколькими загрузочными компонентами, и он отлично работает. Еще одна вещь, которую я еще не пробовал, заключается в загрузке директивы атрибута Angular 2 для использования за пределами Angular 2 компонентов. Я подозреваю, что это не сработает и что bootstrap работает только с компонентами, а не с директивами.

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

Ответ 2

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

Именно так я использую Angular2. См. Пример в https://github.com/niczero/ng2-es5-file-upload/blob/master/demo/index.html - некоторые из моих "статических" страниц генерируются perl так же, как вы используете ruby.

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