Как использовать приложение GWT в приложении Angular 7 в качестве компонента? - PullRequest
Новая
       55

Как использовать приложение GWT в приложении Angular 7 в качестве компонента?

0 голосов
/ 05 апреля 2019

У меня есть приложение Angular 7, с которым я хочу использовать одностраничное приложение GWT в качестве компонента. Причина использования этого приложения GWT в качестве компонента заключается в том, что я не хочу, чтобы мое приложение GWT перезагружалось снова и снова при переходе к этому приложению (или странице) с использованием угловой маршрутизации.

Вот что я попробовал:

  • Во-первых, я поместил скомпилированные двоичные файлы этого проекта GWT в папку активов моего приложения Angular. Затем я поместил все содержимое под тегом его index.html в файле component.html моего приложения Angular. Затем добавил кнопку и применил навигацию маршрутизатора к событию щелчка, чтобы при нажатии этой кнопки была открыта страница компонента моего приложения Angular.

  • Я встроил приложение GWT в iFrame в угловой компонент. Но я заметил, что при переходе на эту страницу через маршрутизацию, она перезагружалась снова и снова, когда я переходил назад и вперед на эту страницу и на другую страницу Angular, используя маршрутизацию.

  • Я также добавил путь ко всем необходимым файлам javascript приложения GWT в параметре scripts в файле angular.json и изменил параметр allowJs на true в tsconfig .json.

  • Я знаю, что при сборке проекта Angular создается файл main.js, который содержит скомпилированный код JS для всех компонентов, включая их маршрутизацию. Итак, я также подумал о преобразовании основного файла nocache.js GWT в файл TS, но это вызвало много синтаксических ошибок, поэтому я проигнорировал эту процедуру.

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

Итак, кто-нибудь может помочь мне найти решение? Я также не уверен, возможно ли это сделать или нет.

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

Я добавляю еще один ответ для решения проблемы, упомянутой в комментарии к первому ответу. Проблема в том, что iframe внутри компонента по-прежнему перезагружается, даже если компонент поддерживается в RouteReuseStrategy . Вероятно, это связано с тем, что Angular отсоединяет его от DOM страницы, а затем снова подключает его.

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

Вот пример компонента приложения, который реализует этот обходной путь. Компонент gwt является компонентом с iFrame.

Шаблон: 

<h2><a routerLink="/main">Main</a></h2>
<h2><a routerLink="/gwt">Gwt</a></h2>
<gwt [hidden]="!gwtVisible"></gwt>
<router-outlet [hidden]="gwtVisible"></router-outlet>

код: 

export class AppComponent  {
  gwtVisible = false;

  constructor(router: Router) {
    router.events.subscribe((routerEvent) => {
      if (routerEvent instanceof NavigationEnd) {
        this.gwtVisible = routerEvent.url === '/gwt';
      }
    });
  }
}

Как видно из кода, компонент приложения скрывает основное содержимое при переходе к маршруту /gwt и показывает компонент gwt, в противном случае он скрывает его и обычно показывает другое содержимое из router-outlet.

В маршрутах, которые я определил, он перемещается к пустому компоненту, чтобы иметь что-то для маршрута /gwt. 

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'main', component: MainComponent },
  { path: 'gwt', component: EmptyComponent }
];

Я также создал StackBlitz с рабочим образцом.

1 голос
/ 09 апреля 2019

Если я правильно понимаю, вы хотите сохранить угловой компонент (страницу) при переходе на другие маршруты.

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

Вот очень простая реализация, предполагающая, что ваш компонент с приложением GWT имеет маршрут 'gwt'.

export class GwtRouteReuseStrategy extends RouteReuseStrategy {
  private cache: {[key: string]: DetachedRouteHandle} = {};

  public shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.url.join('/') === 'gwt';
  }

  public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.cache[route.url.join('/')] = handle;
  }

  public shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return this.cache[route.url.join('/')] != null;
  }

  public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.cache[route.url.join('/')];
  }

  public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.url.join('/') === 'gwt';
  }
}

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

@NgModule({
  …,
  providers: [
    { provide: RouteReuseStrategy, useClass: GwtRouteReuseStrategy}
  ],
})
export class AppModule {
}

Здесь также приведена ссылка на StackBlitz образец, где вы можете увидеть, как он работает.Откройте консоль, чтобы увидеть, что «GwtComponent» не разрушается, когда вы уходите.

...