我可以为Angular 6中某个模块的所有子布线加载一次元件吗？

Question

我有一个问题，我需要在Angular 6应用程序中显示一个iframe。该元素应该存在于模块的所有路由中(延迟加载)。应用程序中还有其他不需要显示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元素，因为重新插入仍然会触发重新加载。请参阅：How to prevent an iframe from reloading when moving it in the DOM

我的问题是：

无论调用此模块中的哪个路由器，只要Module存在，我如何指定呈现一次的组件。

结果如下所示：

<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中把它渲染成一个路由器插座的兄弟:例如：

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

当然，我的Iframe模块必须是app.module的一部分。但是现在，路由器替换的所有动态内容都不会对my-iframe产生影响

编辑：

我的理解是，您希望根据路由器呈现的组件来显示/隐藏iframe。因此，您基本上需要侦听路由器事件，以检查当前呈现的组件以及是否要显示I帧。我在stackoverflow上发现了一个类似的问题：Angular 2+: How to access active route outside router-outlet

有一个解决方案，使用路由器事件，路由器配置中的数据和一个布尔观察值来显示/隐藏侧边栏(在您的情况下是i-frame)。唯一的问题是你应该尝试使用[hidden]="!myVar"而不是ngIf，因为否则i-frame会重新加载。