change - El enrutador Angular2 agrega componente en lugar de reemplazarlo

router events angular 6

Question

Tengo una aplicación Angular2 con una salida de enrutador que muestra diferentes componentes dependiendo de qué enlace se hace clic en un menú lateral.

El marcado para el componente principal que contiene el <router-outlet> tiene este aspecto

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

Si hago clic en el enlace Demo , el componente de demostración se procesa, pero si hago clic en el enlace Inicio , el componente de inicio se representa por encima del componente de demostración en DOM. Al hacer clic en ellos varias veces se obtendrá un DOM como este.

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

Las rutas se definen como

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

¿Por qué el <router-outlet> no reemplaza el componente, sino que agrega otra "instancia" del componente al cambiar de ruta?

Answer 1

Al utilizar el método de eliminación, descubrí que el culpable del problema era el módulo BrowserAnimations en mi app.module.ts . Al eliminarlo de mis imports , el problema desapareció. Voy a mirar en la creación de un Plunker para demostrarlo.

Actualización: Esto se describe en este problema de Github .

Actualización 2017-12-13: Esto ya se ha solucionado con este PR, corrección (animaciones): recupere y limpie el DOM correctamente cuando se produzcan fallos de CD .

Answer 2

Estaba usando NgZone dentro del componente y mi routerLink tenía el mismo problema, sin ningún error dentro de la consola.

Cambié el routerLink a un (clic) dentro y llamó a una función como esta:

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

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

Answer 3

Esto sucede también cuando el componente A está lanzando un error , por lo que al navegar por el Componente B, el Componente A no pudo ser destruido debido al error. Este es un error con Angular. Hasta que se solucionen, encuentre la causa del error que se está lanzando y corríjalo. Comprueba tu consola de herramientas dev.

Answer 4

No estoy seguro de si esto coincide exactamente con su situación, sin embargo, he tenido componentes anteriores agregados al DOM al intentar cargar una ruta diferente, y finalmente me di cuenta de que el uso de Hash estaba en conflicto con las direcciones del componente,

export const AppRouting = RouterModule.forRoot (rutas, { useHash: false });

Esto solucionó todos mis problemas con componentes añadidos no deseados

Answer 5

Tuve un problema muy similar, también utilizando Firebase.

Ver los componentes que se adjuntan a la salida del enrutador

Sin embargo, encontré que el problema provenía de un error dentro de uno de mis componentes, no relacionado con mi enrutamiento. Uno de los componentes tenía una referencia a un "FormsArray", que no se utilizó y tenía un formato incorrecto. Arrojó errores en la consola de los devtools, pero no pensé en revisar allí, ya que todo estaba compilando bien.

No estoy seguro si eso ayudará a alguien.

Answer 6

Tuve un problema similar, y la razón fue que usé una directiva que no está declarada en el componente A y no hubo ningún error en la compilación o la consola. así que cuando navega al componente B, el enrutador estaba agregando el contenido.

Para depurar, comenté todo el marcado html en ambos componentes, dejando solo un h1 para ver si el contenido estaba adjuntando. Con algunas pruebas encontré la directiva y, al eliminarla, el enrutador volvió a la normalidad.