Angular2路由器附加组件而不是替换组件

我有一个Angular2应用程序，有一个路由器出口，根据侧菜单中单击的链接显示不同的组件

包含

的主组件的标记如下所示

<div *ngIf="authenticated == false">
  <app-login></app-login>
</div>
<div *ngIf="authenticated">
  <div class="page home-page">
    <header class="header">
      <app-navbar></app-navbar>
    </header>
    <div class="page-content d-flex align-items-stretch">
      <div class="sidebar-container">
        <app-sidebar-menu></app-sidebar-menu>
      </div>
      <div class="content-inner">
      <app-page-header></app-page-header>
        <div id="sub-content">
          <router-outlet></router-outlet>
        </div>
        <app-footer></app-footer>
      </div>
    </div>
  </div>
</div>

<div _ngcontent-c0="" id="sub-content">
    <router-outlet _ngcontent-c0=""></router-outlet>
  <app-home _nghost-c6="">...</app-home>
  <app-demo _nghost-c7="">...</app-demo>
  <app-home _nghost-c6="">...</app-home> <!-- Why so many here? Should be just either one <app-home> or <app-demo>  -->
  <app-demo _nghost-c7="">...</app-demo>
  <app-home _nghost-c6="">...</app-home>
  <app-demo _nghost-c7="">...</app-demo>
  <app-footer _ngcontent-c0="" _nghost-c5="">...</app-footer>
</div>

---

为什么

不替换组件，而是在路由之间切换时添加组件的另一个“实例”？

通过使用消除方法，我发现问题的根源是我的

app.module.ts

中的

浏览动画

模块。通过将其从我的

imports

it中删除，问题就消失了。我将研究创建一个Plunker来演示它

更新： 本文对此进行了描述

更新2017-12-13:

---

这个问题现在已经用这个PR解决了。

我有一个非常类似的问题，也使用了Firebase

但是，我发现问题来自我的一个组件中的错误，与我的路由无关。其中一个组件引用了一个“FormsArray”，该组件未使用且格式不正确。它在devtools控制台中抛出了错误，但我没有想到在那里检查，因为一切都很好

---

不确定这是否对任何人都有帮助

组件A抛出错误时也会发生这种情况，因此当导航到组件B时，组件A无法由于错误而销毁。这是一个有棱角的虫子。在他们修复之前，找到抛出错误的原因并修复它。检查您的开发工具控制台。

我不确定这是否与您的情况完全匹配，但是我在尝试加载不同的路由时将以前的组件附加到DOM中，最后我发现使用

散列

与组件的地址冲突

export const AppRouting=RouterModule.forRoot（路由，{useHash:false}）

---

这修复了我所有不需要的附加组件的问题

我在组件内部使用NgZone，我的routerLink也有同样的问题，控制台内部没有任何错误

在内部将routerLink更改为（单击），并调用如下函数：

constructor(
    (...)
    private zone: NgZone,
    (...)
  ) { }

goToPage() {
    this.zone.run(() => this.router.navigate(['/page']));
}

---

我有一个类似的问题，原因是我使用了一个未在组件a中声明的指令，并且在编译或控制台中没有错误。 因此，当导航到组件B时，路由器正在添加内容

---

---

为了调试，我注释掉了这两个组件中的所有html标记，只留下一个h1来查看内容是否追加。通过一些测试，我找到了这个指令，通过删除它，路由器又恢复了正常

哇。。。它当然不应该这样做。它使用类似的代码正确地替换了我的应用程序中的内容。你能做一个复制错误的扑通吗？或者在上面的问题中为home组件提供html？我想我快疯了！我在搞一个打捞机！这也发生在我的自定义选项卡组件中。我已经让几个人和我一起检查过了，但我什么也找不到。我想我可能会有一个*NGO，用于在某个地方闲逛，以某种方式为每次点击创建div，但这不是问题所在。如果我在浏览器中检查代码，它会直接显示路由器链接，后跟每次单击时添加到的组件列表。希望有人能尽快找到答案。有趣的是，我无法在Plunker中复制它，它的行为和它应该的一样。我要找一个，这是我没想到的！会让你不断更新！想一想，你在用firebase吗？这发生在我在我的应用程序中实现firebase之后。感谢您的澄清，这是我读了一整天的最重要的消息！你太棒了，很高兴它帮了你！我曾尝试用Plunkr重新创建它，但没有成功，因为我无法确定它是否是一个bug！这也解决不了问题，很奇怪！这是一个已知的角度问题：在修复此问题之前，您必须按照TetraDev的建议识别并隔离异常。为了修复，它实际上帮助了我！我的问题是，新的子组件未能完全呈现（使用日期管道处理错误的数据）。在这个场景中，angular一个接一个地显示了新组件和旧组件的部分数据。我一修复管道问题，问题就解决了。非常感谢你的提示！你是如何调试的。？我也遇到了同样的问题，你能显示你所做的代码更改吗。！我和@Mrworldwide有同样的问题。这是我不喜欢使用框架的原因之一，有时调试是不可能的。在我的例子中，它是一个包含错误的父组件（乍一看是无害的），显然是导致附加而不是替换。谢谢你指出。这有帮助。在我的例子中，如果两个组件中的任何一个出现错误，就会发生这种情况！谢谢我遇到了相同的问题，当我导航到组件B时，控制台中没有错误。当您在控制台上也没有看到任何错误时，可能会出现此问题。在我的例子中，修复如下：原始代码：this.obj1=obj2；固定代码：this.obj1=uj1.extend（this.obj1，obj2）；我也有这个问题。删除BrowserAnimationsModule后，我不会遇到附加问题，但现在我遇到了一个错误（找到了合成侦听器@inOut.done.），因为我没有BrowserAnimationsModule！是的，我现在意识到我的Toastr东西需要浏览动画模块。有没有想过如何在不移除该模块的情况下绕过此问题？

constructor(
    (...)
    private zone: NgZone,
    (...)
  ) { }

goToPage() {
    this.zone.run(() => this.router.navigate(['/page']));
}