#angular #gwt
#angular #gwt
Вопрос:
Это устаревшее приложение GWT. Существует требование иметь новое меню. Этот новый main хотели реализовать с использованием angular6 . Каковы будут возможности для этого.
После небольшого поиска я обнаружил, что одним из возможных решений является
- iFrame
создайте новый проект angular. Добавьте маршрутизатор. Используйте этот путь маршрута в приложении GWT в iframe. Проблема с подходом заключается в том, что мы не хотим создавать отдельный проект.
2) Угловой элемент
У меня не так много знаний об этом. Могу ли я создать компонент и использовать этот компонент в приложении gwt?
Существует ли какой-либо другой подход для добавления angular в существующее приложение gwt?
Комментарии:
1. Я не уверен, как именно работает движок GWT, но это в значительной степени классический пример использования Angular Element. Не бойтесь его использовать, вы должны просто связать пакет, как вы делаете с любыми сценариями, и добавлять компоненты, как и любой другой веб-компонент.
2. Нет index.html здесь. Есть jsp-файлы. Я могу загрузить приложение там?
3. JSP в конечном итоге преобразуется в HTML, если у вас есть теги прав, такие как <ang-universal><anguniversal/>, он должен работать (почти) точно так же, как веб-компонент. и введите скрипт с помощью ‘ScriptInjector’
4. Однако для удобства обслуживания и удобства чтения, а также если вы знакомы с iFrames, объедините оба решения, используйте Angular element внутри вашего iFrame, чтобы все Angular-материалы находились в одном и том же месте. Вам не нужно создавать совершенно новое приложение, вы можете просто создать другую точку входа для своего приложения. (Это так же просто, как 2 строки кода и новый компонент, который вы регистрируете).
5. В вашем модуле приложения Angular вы переопределяете ngDoBoottstrap и загружаете нужный компонент. Я думаю, что это для angular 6, если вы хотите иметь много элементов, которые вы можете использовать с resolveComponentFactory. В любом случае это должно выглядеть примерно так:
export class AppBrowserModule implements DoBootstrap { constructor(injector: Injector) { const menuElement = createCustomElement(menuComponent, { injector: injector }); customElements.define("angular-menu", menuElement); } ngDoBootstrap(app: ApplicationRef) { app.bootstrap(AppComponent); }