Question

在我的Angular2应用程序中，我有一些页面存在多个组件。

在我的app.component.html中，我有这个：

<router-outlet></router-outlet>

在组件的html中有这样的东西：

<div class="container dashboard page">
  <app-nav></app-nav>
  <div class="main">
    <p></p>
  </div>
  <app-footer></app-footer>
</div>

现在当我加载页面时，导航和页脚总是刷新。这似乎合乎逻辑，但我认为我需要在app.component.html中执行此操作是正确的吗？

<app-nav></app-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

这是最佳做法，还有另一种方法可以避免导航和页脚刷新吗？

Answer 1

这是最佳做法吗？还有另一种方法可以避免导航和导航从更新的页脚？

是的，确实如此。您不希望您的“全局组件”随路径更改而更改，因此请勿将它们放在“路径更改时更改的组件”中。 Angular 2是关于组件之间的关系，它们的嵌套是构建应用程序时的一个关键部分:)。

只有几个论点：

如果您将全局组件放在router-outlet中，则会重复相同的代码，这违反了 DRY 规则。想象一下全局组件的任何更改 - 您必须更新每个页面组件。
如果全局组件的状态完全依赖于Angular提供的路由器，那么这是一个糟糕的架构。路由器负责路由，如果状态与当前页面一致，则页面组件应负责全局组件的更改。
全局组件和页面组件之间的通信应该使用具有RxJs主题的服务来完成。我已经描述过它here。这样，您就可以使用单个对象控制全局组件的状态，该对象是页面组件和全局组件之间的桥梁。