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。

我的问题是：

无论模块调用哪个路由器，我如何都可以指定一个只要模块存在就可以渲染一次的组件。

结果可能如下所示：

<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中呈现：EG：

<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

有一个使用routerevents的解决方案，router config中的数据和一个可观察到的布尔值，可显示/隐藏侧边栏（在您的情况下为i帧）。唯一的事情是您应该尝试使用[hidden]="!myVar"而不是ngIf，因为否则我会再次重新加载i帧。

我可以为Angular 6中的模块的所有子路径一次加载组件吗？

1 个答案: