Question

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

包含<router-outlet>的主要组件的标记如下所示

<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>

如果单击 Demo 链接，将呈现演示组件，但如果我单击 Home 链接，则主组件将呈现在DOM中的演示组件上方。点击它们几次将产生这样的DOM

<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>

路线定义为

export const router: Routes = [
    { path: 'demo', component: DemoComponent, canActivate: [AuthGuard] },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
]

为什么<router-outlet>不替换组件，而是在路由之间切换时添加组件的另一个“实例”？

Answer 1

通过使用消除方法，我发现问题的罪魁祸首是我BrowserAnimations中的app.module.ts模块。从我的imports中删除它后，问题就消失了。我将研究创建一个Plunker来演示它。

<强>更新这在Github issue。

中有所描述

更新2017-12-13： 现在已经使用此PR fix(animations): properly recover and cleanup DOM when CD failures occur修复了此问题。

Answer 2

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

Answer 3

I had a very similar issue, also using Firebase.

See the components being appended to router outlet

但是，我发现问题来自我的某个组件中的错误，与我的路由无关。其中一个组件引用了一个＆＃34; FormsArray＆＃34;，它没有被使用和格式错误。它在devtools控制台中引发了错误，但我没有考虑在那里检查，因为一切都编译得很好。

不确定这是否会对任何人有所帮助。

Answer 4

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

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

Answer 5

我不确定这是否与您的情况完全匹配，但是当我尝试加载不同的路由时，我已将先前的组件附加到DOM，最后我认为使用Hash与地址冲突组件，

export const AppRouting = RouterModule.forRoot（routes，{ useHash：false }）;

这解决了我不想要的附加组件的所有问题

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

5 个答案: