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

Posted 2023-02-23

【中文标题】我可以为 Angular 6 中模块的所有子路由加载一个组件吗？

【英文标题】：Can I load a Component one time for all child routes of a Module in Angular 6?

【发布时间】：2019-06-25 00:14:18

【问题描述】：

我有一个问题，我需要在 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>

【参考方案1】：

不是 100% 确定我是否理解您想要的，但您可以拥有一个组件或带有组件 <my-iframe> 的模块，并将其呈现在 app.component 中作为路由器出口的兄弟：EG：

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

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

编辑：

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

有一个解决方案使用 routerevents、路由器配置中的数据和一个 boolean observable 来显示/隐藏侧边栏（在您的情况下是 i-frame）。唯一的问题是你应该尝试使用[hidden]="!myVar" 而不是 ngIf，否则我猜 i-frame 会重新加载。

【讨论】：

感谢您的回答。这很接近。但我不想将 my-iframe-component 放在需要它的模块之外。还有其他模块不需要该组件。所以基本上我想要一个模块中的一个组件，它在模块处于活动状态时加载一次，不管激活哪个路由。如果这样更清楚。

当你的模块只包含你的 my-iframe 组件及其依赖项时，然后将它导入 app.modules 中，它只会被加载一次。其他模块不需要导入。

我已经改写了这个问题 - 我希望现在更清楚一点。谢谢。

啊，谢谢，这看起来很有趣 - 也感谢使用 hidden 的提示。我会试一试，然后给你一些结果。谢谢。