Могу ли я загрузить компонент один раз для всех дочерних маршрутов модуля в Angular 6?

Question

У меня проблема в том, что мне нужно показать iframe в приложении Angular 6.Этот элемент должен присутствовать для всех маршрутов модуля (загружен ленивым).В приложении есть и другие модули, которым не нужно показывать iframe.

. Таким образом, глобальное решение, подобное этому, может работать, но это не то, что я ищу:

<!-- app.component.html -->
<app-iframe></app-iframe>
<router-outlet></router-outlet>

Допустим, маршрутизация в этом модуле выглядит следующим образом:

const routes: Routes = [
  {
    path: '',
    component: FirstComponent
  },
  {
    path: 'route-2',
    component: SecondComponent
  },
  {
    path: 'route-3',
    component: ThirdComponent
  }
];

Теперь в моем модуле я не могу просто создать компонент, такой как IframeComponent, и вставить его в другие компоненты, такие как:

<!-- first.component.html -->
<h1>Content of this component</h1>
<app-iframe></app-iframe>

Это потому, что каждый раз, когда загружается другой маршрут модуля, IframeComponent перезагружается, как и фактический элемент iframe.

Я также не могу кешировать iframe Элемент DOM в Сервисе, так как повторная вставка все равно вызовет перезагрузку.См .: Как предотвратить перезагрузку iframe при его перемещении в DOM .

Мой вопрос:

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

Результат может выглядеть следующим образом:

<router-outlet></router-outlet>
<app-first></app-first>
<app-iframe></app-iframe>

И после перехода на module-url/route-3:

<router-outlet></router-outlet>
<app-third></app-third> <!-- only this changed -->
<app-iframe></app-iframe>

А после перехода на другой модуль:

<router-outlet></router-outlet>
<app-another-component></app-another-component>

Answer 1

Не уверен на 100%, если я понимаю, что вы хотите, но вы могли бы иметь компонент или модуль с компонентом <my-iframe> и отобразить его в app.component в качестве родственного элемента для router-outlet: EG:

<my-iframe></my-iframe>
<router-outlet></router-outlet>

Конечно, мой модуль Iframe должен быть частью app.module.Но теперь весь динамический контент, замененный маршрутизатором, не будет влиять на my-iframe

РЕДАКТИРОВАТЬ:

Я так понимаю, что вы хотите показать / скрыть iframe на основе того, какой компонентотрендерено маршрутизатором.Таким образом, вам нужно прослушивать события маршрутизатора, чтобы проверить, какой компонент отображается в данный момент, и хотите ли вы показать свой i-кадр.Я нашел похожий вопрос по stackoverflow: Angular 2+: как получить доступ к активному маршруту вне маршрутизатора-розетки

Существует решение, использующее routerevents, данные в конфигурации маршрутизатора и логическое значение, наблюдаемое для отображения./ скрыть боковую панель (в вашем случае i-frame).Единственное, что вы должны попытаться использовать [hidden]="!myVar" вместо ngIf, потому что в противном случае я думаю, что i-frame перезагрузится снова.