es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La barra de navegación lateral de Angular no actualiza el contenido según la ruta.

22 Jul, 2023 Programación

Estoy intentando crear un sidenav fijo que actualice su contenido según la ruta. No funciona al navegar, solo después de refrescar la página. ¿Qué estoy haciendo mal?

App.component.ts

export class AppComponent {
  title = 'foo';
  showSideNav = false;

  constructor(private router: Router ) {

    this.router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        this.showSideNav = e.url != "/login";
      }
    });
  }
}

App.component.html

<app-header></app-header>

<mat-sidenav-container *ngif="showSideNav">
  <mat-sidenav mode="side" opened="">

      <h4 class="name">Foo</h4>
      <p class="designation">Barr</p>

      <mat-divider></mat-divider>
      <button mat-button="" class="menu-button" [routerlink]="['/baar']">
          <mat-icon>dangerous</mat-icon>
          <span>baar</span>
      </button>  
  </mat-sidenav>
  <mat-sidenav-content>
      <div class="content mat-elevation-z8">
          <router-outlet></router-outlet>
      </div>
  </mat-sidenav-content>
</mat-sidenav-container>

<router-outlet *ngif="!showSideNav"></router-outlet>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el sidenav fijo que no actualiza su contenido de acuerdo a la ruta de navegación puede ser debido a que el evento de navegación no está activando el mecanismo de detección de cambios en Angular. Una posible solución a esto es activar manualmente la detección de cambios inyectando el servicio ChangeDetectorRef en el constructor y llamando al método detectChanges() dentro de la suscripción de eventos del enrutador. Esto forzaría a Angular a actualizar la vista cada vez que cambia la ruta.

    Código modificado de AppComponent:

    import { Component, ChangeDetectorRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'foo';
  showSideNav = false;

  constructor(private router: Router, private cdr: ChangeDetectorRef) {
    this.router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        this.showSideNav = e.url != "/login";
        this.cdr.detectChanges();
      }
    });
  }
}

    Al inyectar el servicio ChangeDetectorRef y llamar al método detectChanges() dentro de la suscripción de eventos del enrutador, nos aseguramos de que la vista se actualice cada vez que cambie la ruta.

Comments are closed.