如何在 Angular2/4 中的模块之间传递数据？答案

【问题标题】：How to pass data between modules in Angular2/4?如何在 Angular2/4 中的模块之间传递数据？
【发布时间】：2017-11-28 19:07:55
【问题描述】：

我有 2 个模块：根模块和授权模块（延迟加载）。根模块有页脚块，我想隐藏在“auth”路线上。我试图通过模块路由传递数据，例如：

{path: 'auth', component: AuthComponent, data: {hideFooter: true}}

但是根模块组件找不到数据，它总是{}。我只能在身份验证组件中获取此数据。我该怎么做，或者有其他方法可以解决我的问题？

【问题讨论】：

【解决方案1】：

一种方法是对根模块和身份验证组件使用不同的布局。

在授权组件中获取数据使用

  constructor(route: ActivatedRoute) {
    const hideFooter= route.snapshot.data.hideFooter;
  }

【讨论】：

【解决方案2】：

一种快速的方法是在您的应用组件中放置一个 if 条件

<navbar></navbar>
<router-outlet></router-outlet>
<footer *ngIf="router.url !== 'auth'"></footer>

你还需要在你的ts文件中导入路由器

或者

app.component.ts

let routes = ['auth', 'someOther']
this.showFooter = routes.indexOf(this.router.url) < 0

那么你的html就变成了

<navbar></navbar>
<router-outlet></router-outlet>
<footer *ngIf="showFooter"></footer>

【讨论】：

是的，这很简单，但是如果您有其他路线也应该这样做呢？
由于页脚是由它的选择器标签而不是路由器出口使用的，我们不能使用正确的方式，即 [canActivate] 据我所知，只有两个选项，要么分别添加页脚标签在每个组件中（有点混乱），或者您通过组件中的 if 语句转义所有路由，这也很混乱，但假设您不会有大量需要绕过页脚组件的路由列表。您可以在 ts 文件中执行此操作，添加要转义的路线列表并为其附加一个布尔变量，然后将该变量放在 html 页脚的 ngIf 中
没关系，但我认为将数据传递给路由是更舒适的方式，例如，如果路由器名称更改了，我应该找到它并在数组中编辑它.
您可以在这里参考更好的方法：stackoverflow.com/questions/41972593/…
好的，谢谢，据我了解，没有最佳实践

【解决方案3】：

对于 Angular 4，here 你有 Angular 文档来解决你的问题。

如果您只想通信两个组件，请参阅 Angular 文档中的“component-interaction”。

另外，here你还有一个类似的问题已经解决了。

【讨论】：